在angular7中创建组件/自定义指令/管道

组件

使用命令创建组件

@Component({
  SELEctor: 'app-heroes',templateUrl: './heroes.component.html',styleUrls: ['./heroes.component.less']
})

手动创建组件

1. 创建一个组件ts文件
2. 在组件中设置

// 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. 在index.ts文件中引入并导出

// 1. 导入
import { DinerBirthComponent } from "./diner.birth";

// 2. 导出
export { DinerBirthComponent }

// 3. 注册
@NgModule({
    // 这里列出的 NgModule 所导出的可声明对象可用在当前模块内的模板中
    imports: [....],// declarations:[ 组件 ] 属于该模块的一组组件、指令和管道（统称可声明对象）。
    // 注意点：在这个源数据中只能声明组件、管道、指令
    declarations: [DinerBirthComponent],// 定义此 NgModule 中要编译的组件集，这样它们才可以动态加载到视图中。
    entryComponents: [....],// 导出的模块
    exports: [....]
})

指令

认识指令

自定义指令

1. 创建指令的文件ts文件
2. 在指令文件中写

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. 在index.ts中将该指令导入到ngModule中

// 1.导入
import { DinerHiddenDirective } from "./diner.hidden";

// 2.导出
export const DINER_COMPONENTS: Provider[] = [ DinerHiddenDirective ];

// 3.ngModule中注册
@NgModule({
    // 这里列出的 NgModule 所导出的可声明对象可用在当前模块内的模板中
    imports: [],// declarations:[ 组件 ] 属于该模块的一组组件、指令和管道（统称可声明对象）。
    // 注意点：在这个源数据中只能声明组件、管道、指令
    declarations: [DINER_COMPONENTS],// 定义此 NgModule 中要编译的组件集，这样它们才可以动态加载到视图中。
    entryComponents: []
})

1. 在页面中引用

<!-- 隐藏当前的这个标签 -->
  <div class="form-group col-sm-6" dinerHidden>
     
  </div>

管道中的常用API

asyncPipe

CurrencyPipe

DatePipe

decimalPipe

自定义管道

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: [...],// 定义此 NgModule 中要编译的组件集，这样它们才可以动态加载到视图中。
    entryComponents: [...]
})

~
<!-- item.Dgender的值为m和w，将对应的m转为男，w转为女 -->
<td>{{item.Dgender | getgender}}</td>
~