angular component direct pipe

组件

声明一个组件

import { Component } from '@angular/core'

@Component({
    selector:'<app-component></app-component>',
    template:'<h2>我是一个组件<h2>'
})

export class MyComponent{

}

定义完组件需要在app.module declarations引入

@NgModule({
    declarations: [ MyComponent],
    ...
})

cli创建组件

利用命令创建的组件会自动更新app.module声明组件
ng g c simple-form --inline-template --inline-style
ng g c simple-form -it -is # 新建组件，该组件使用内联模板和内联样式

指令

指令可以改变组件的样式,结构

import { Directive,HostBinding, Input, HostListener, Attribute} from '@angular/core';

@Directive({
    selector:'[greet]'
})

export class GreetDirective{
    @Input() greet: string;
    //与元素属性绑定
    @HostBinding() get innerText() {
        return this.greet;
    }
    //绑定事件
    @HostListener('click',['$event']) onclick($event){
        console.log('click....');
    }
    //获取属性的值
    constructor(@Attribute('author') public author:string){
        console.log('author',author);
    }
}

ng-template 在 Angular 中，我们可以通过 ViewChild 装饰器来获取视图中定义的模板元素，然后利用 ViewContainerRef 对象的 createEmbeddedView() 方法，创建内嵌视图。

@Component({
  selector: 'app-root',
  template: `
    <ng-template #tpl>
      Hello, Semlinker!
    </ng-template>
  `,
})

export class AppComponent implements AfterViewInit{
  @ViewChild('tpl') tplRef: TemplateRef<any>;

  constructor(private vcRef: ViewContainerRef) {}

  ngAfterViewInit() {
    this.vcRef.createEmbeddedView(this.tplRef);
  }
}

结构指令

@Directive({
selector: '[show]'
})

    export class UnlessDirective  {
        @Input('show')
        set condition(newCondition: boolean) {
            if (!newCondition) { 
                this.viewContainer.createEmbeddedView(this.templateRef);
            } else {
                this.viewContainer.clear();
            }
        }

        constructor(
            private viewContainer: ViewContainerRef,
            private templateRef: TemplateRef<any>,
            ) {
        }
    }
    //使用
    <div *show='false'></div>

管道

管道作用是对数据进行过滤处理，比如转换大小写日期格式化等等

内建管道及分类

1. String -> String
   • UpperCasePipe
   • LowerCasePipe
   • TitleCasePipe
2. Number -> String
   • DecimalPipe
   • PercentPipe
   • CurrencyPipe
3. Object -> String
   • JsonPipe
   • DatePipe
4. Tools
   • KeyValuePipe（v6.1.0）
   • SlicePipe
   • AsyncPipe
   • I18nPluralPipe
   • I18nSelectPipe

管道可以接收多个值用:隔开
{{'abcd' | slice:0:3}} //'abc'

自定义管道

import { Pipe,PipeTransform } from '@angular/core';

@Pipe({
    name:"strRepeatPipe"
})

export class StrRepeatPipe implements PipeTransform{
    transform(str:string,num:number):string{
        return str.repeat(num)
    }
}

Output(子组件向父组件传值)

@Output() change = new EventEmitter<{name:string}>();
change.emit({name:''})

Input(父组件向子组件传参)

<clicd-component [value]='value'></clicd-component>
子组件
@Input() value:string;

组件样式

 <div [ngClass]="{'userClass':true}"></div>
 <div [ngClass]="['blue', 'round']"></div>
 <div [ngStyle]="{color: 'white', 'background-color': 'blue'}"></div>
 <div [style.background-color]="'yellow'"></div>