@Component({ selector: 'app-heroes', templateUrl: './heroes.component.html', styleUrls: ['./heroes.component.less'] })
// 1. 導入包,按需導入 import { Component } from "@angular/core"; import { CoreEdit, NavLayoutComponent } from "@reco/core"; import { DinerService } from "../Service"; // 2.定義當前組件的修飾器 @Component({ // 支出對外使用的名稱 selector: "diner-birth", // 使用的模板 templateUrl: "./diner.birth.html" }) // 導出使用的類 export class DinerBirthComponent extends CoreEdit { constructor( private _dinerService: DinerService, layout: NavLayoutComponent ) { super(_dinerService, 'diner-birth', layout); } }
// 1. 導入 import { DinerBirthComponent } from "./diner.birth"; // 2. 導出 export { DinerBirthComponent } // 3. 註冊 @NgModule({ // 這裏列出的 NgModule 所導出的可聲明對象可用在當前模塊內的模板中 imports: [....], // declarations:[ 組件 ] 屬於該模塊的一組組件、指令和管道(統稱可聲明對象)。 // 注意點:在這個源數據中只能聲明組件、管道、指令 declarations: [DinerBirthComponent], // 定義此 NgModule 中要編譯的組件集,這樣它們才能夠動態加載到視圖中。 entryComponents: [....], // 導出的模塊 exports: [....] })
建立自定義指令的命令: ng g d 目錄/指令名稱html
import { Directive, ElementRef, Input, Output } from '@angular/core'; // 自定義指令 @Directive({ selector: '[dinerHidden]' }) // 導出指令的模塊 export class DinerHiddenDirective { // el 表明當前的元素 constructor(el: ElementRef) { // console.log() el.nativeElement.style.display = "none" } }
// 1.導入 import { DinerHiddenDirective } from "./diner.hidden"; // 2.導出 export const DINER_COMPONENTS: Provider[] = [ DinerHiddenDirective ]; // 3.ngModule中註冊 @NgModule({ // 這裏列出的 NgModule 所導出的可聲明對象可用在當前模塊內的模板中 imports: [], // declarations:[ 組件 ] 屬於該模塊的一組組件、指令和管道(統稱可聲明對象)。 // 注意點:在這個源數據中只能聲明組件、管道、指令 declarations: [DINER_COMPONENTS], // 定義此 NgModule 中要編譯的組件集,這樣它們才能夠動態加載到視圖中。 entryComponents: [] })
<!-- 隱藏當前的這個標籤 --> <div class="form-group col-sm-6" dinerHidden> </div>
建立管道的命令:ng g pipe 目錄/管道名稱api
import { Pipe, PipeTransform } from '@angular/core'; // 自定義管道 getGender @Pipe({ name: 'getGender' }) // 建立的管道的類 export class GenderPipe implements PipeTransform { transform(value: string, exponent: string) { if (value == ' ') return "未知" return value === 'm' ? "男" : "女" } }
// 1. 先導入 import { GenderPipe } from "./diner.gender"; // 2.導出 export const DINER_COMPONENTS: Provider[] = [GenderPipe]; // 3.添加到NgModule中的 @NgModule({ // 這裏列出的 NgModule 所導出的可聲明對象可用在當前模塊內的模板中 imports: [...], // declarations:[ 組件 ] 屬於該模塊的一組組件、指令和管道(統稱可聲明對象)。 // 注意點:在這個源數據中只能聲明組件、管道、指令 declarations: [DINER_COMPONENTS], // 定義此 NgModule 中要編譯的組件集,這樣它們才能夠動態加載到視圖中。 entryComponents: [...] })
~ <!-- item.DGender的值爲m和w,將對應的m轉爲男,w轉爲女 --> <td>{{item.DGender | getGender}}</td> ~