【angular】@ComponentchangeDetection：用于当前组件的变更检测策略。该策略是下列值之一：

Component是 Directive的子类：它是一个装饰器，用于把某个类标记为 Angular 组件，并为它配置一些元数据，以决定该组件在运行期间该如何处理、实例化和使用。

选项
`moduleId` ：包含该组件的那个模块的 `ID`。该组件必须能解析模板和样式表中使用的相对 `URL`。 `SystemJS` 在每个模块中都导出了 `__moduleName` 变量。在 `CommonJS` 中，它可以设置为 `module.id`。
`template` ：Angular 组件的内联模板 `templateUrl` ：`Angular` 组件模板文件的 `URL`。两者二选一即可。
`styleUrls` ：一个或多个 `URL`，指向包含本组件 `CSS` 样式表的文件。
`styles` ：本组件用到的一个或多个内联 `CSS` 样式。
`animations` ：一个或多个动画 `trigger()`调用，包含一些 `state()`和 `transition()`定义。参见动画和相关的 `API` 文档。
`interpolation` ：改写默认的插值表达式起止分界符（`{{` 和 `}}`）
`entryComponents` ：这个`NgModule`中也有，在`Component`中用的应该不多
`preserveWhitespaces` ：为 `true` 则保留，为 `false` 则从编译后的模板中移除可能多余的空白字符。空白字符就是指那些能在 JavaScript 正则表达式中匹配 `\s` 的字符。默认为 `false`

changeDetection：用于当前组件的变更检测策略。该策略是下列值之一：

ChangeDetectionStrategy.OnPush 把策略设置为 CheckOnce（按需）。
ChangeDetectionStrategy.Default 把策略设置为 CheckAlways。

encapsulation ：供模板和 CSS 样式使用的样式封装策略。取值为：

ViewEncapsulation.Native：使用 Shadow DOM。它只在原生支持 Shadow DOM 的平台上才能工作。
ViewEncapsulation.Emulated：使用垫片（shimmed) CSS 来模拟原生行为。
ViewEncapsulation.None ： Use global CSS without any encapsulation.
ViewEncapsulation.None：使用全局 CSS，不做任何封装。如果没有提供，该值就会从 CompilerOptions 中获取它。默认的编译器选项是 ViewEncapsulation.Emulated`

viewProviders ：定义一组可注入对象，它们在视图的各个子节点中可用。参见例子。重点看下这里：

template: `<needs-greeter></needs-greeter>`

class Greeter {
   greet(name:string) {
     return 'Hello ' + name + '!';
   }
}

@Directive({
  selector: 'needs-greeter'
})
class NeedsGreeter {
  greeter:Greeter;

  constructor(greeter:Greeter) {
    this.greeter = greeter;
  }
}

@Component({
  selector: 'greet',
  viewProviders: [
    Greeter
  ],
  template: `<needs-greeter></needs-greeter>`
})
class HelloWorld {
}

继承自 Directive 装饰器

选项
`selector` ：这个 `CSS`选择器用于在模板中标记出该指令，并触发该指令的实例化。
`inputs` ：列举某个指令的一组可供数据绑定的输入属性； `outputs` ：列举一组可供事件绑定的输出属性。（`这俩属性一般不用了，用对应的装饰器替代`）
`providers` ：一组依赖注入令牌，它允许 `DI` 系统为这个指令或组件提供依赖。这个在`NgModule`一节已有较详细介绍
`exportAs` ：定义一个名字，用于在模板中把该指令赋值给一个变量。
`queries` ：已有对应的属性装饰器，后面具体介绍
`host` ：使用一组键-值对，把类的属性映射到宿主元素的绑定（`Property`、`Attribute` 和`事件`）。也已有对应的属性装饰器，后面具体介绍
`jit` ：如果为 `true`，则该指令/组件将会被 `AOT` 编译器忽略，始终使用 `JIT` 编译。

几种元数据（属性装饰器）详解

A. 组件的输入 `inputs` & `@Input`

angular允许使用两种形式来定义组件的输入，一种是在装饰器@Component中使用inputs来定义，另一种是使用@Input来定义。

首先先介绍在装饰器中使用的输入。inputs接收的是一个字符串数组，用来指定我们输入的键名。

@Component({
    selector: 'my-component',
    inputs: ['name']
})
class MyComponent {
    name: string;
}

name就会对应我们组件中的name变量。

然后我们定义一个组件，当然不可避免有的时候会在其他的组件的模板中使用，所以就可以这样写。

上级组件：

export class AppComponent {
    myName = 'zhangsan';
    ...
}

上级组件的模板：

<app-messages [name]="myName"></app-messages>

方括号[]：数据绑定，也叫输入绑定。将等号右边的变量绑定在左边[]中的变量上。

我们的组件：

@Component({
    selector: 'app-messages',
    inputs: ['name'],
    templateUrl: './messages.component.html',
    styleUrls: ['./messages.component.css']
})

export class MessagesComponent implements OnInit {
    name: string;
}

这里我们就用name接受了上级组件的myName。

通过上面的图，就很容易看输入数据的对应关系。

然后我们打印一下看看变量是否成功输入了。

export class MessagesComponent implements OnInit {
    name: string;
    ngOnInit() {
      console.log(this.name);
    }
}

成功输入！

@Input：上面我们实现了组件的数据输入，但是angular并没有满足现状，还提供另外一种输入的方法，就是@Input。

@Component({
    selector: 'my-component'
})

class MyComponent {
    @Input() name: string;
}

只要在我们的组件中定义变量的时候使用@Input装饰器就行了。对比上面我们使用inputs时，少了一个二次声明。这种方法感觉数据的传递少了一层关系，更加易于理解，而且代码也更加的工整。

B. 组件输出`outputs` & `@Output`

说完了组件的输入，下面我们就该聊聊组件的输出了。要将数据从组件中传递出去，就要使用输出绑定。

<button (click)="display()"></button>

圆括号(): 事件绑定，又叫输出绑定。这里我们监听click事件，然后触发display方法。

除了click，angular还有很多内置的事件，当然，我们在编写自己的组件的时候，也可以自定义一个事件，来与外部通信。

自定义事件,需要做三件事情：

1.在@Component配置中，制定outputs配置项
2.在配置的属性中，设置一个EventEmitter（事件触发器）
3.在适当的时候，也就是要触发的方法中，通过EventEmitter触发事件

下面看一下示例：

@Component({
    selector: 'my-component',
    outputs: ['newEvent']
})

export class MyComponent {
    newEvent: EventEmitter<string>;
    constructor() {
        this.newEvent = new EventEmitter();
    }
    display(): void {
        this.newEvent.emit("test event");
    }
}

然后我们就可以通过上面模板中的代码实现输出了。

如果想在一个父级的组件中使用这个输出，就要使用我们自己的事件了。下面看一个示例：

父级组件：

export class AppComponent {
    ...
    showEvent(message: string) {
        console.log(hello: ${message});
    }
}

父级模板：

<app-messages (newEvent)="showEvent($event)">
</app-messages>

我们的组件：

@Component({
    selector: 'app-messages',
    outputs: ['newEvent'],
    templateUrl: './messages.component.html'
})
export class MessagesComponent {
    newEvent: EventEmitter<string>;
    constructor(private messageService: MessageService) {
        this.newEvent = new EventEmitter();
    }
    display(): void {
        this.newEvent.emit('test event');
    }
}

我们的组件模板：

<button (click)="display()">触发</button>

然后点击触发，可以看到输出hello：test event。数据输出成功！

好了我们再来梳理整个输出过程：

1.我们自定以一个组件，通过内置的click事件触发display方法，这时就会触发我们自定义的事件：newEvent。

2.当事件触发的时候，他会执行上一级的方法：showEvent。

3.我们的事件输出了一个字符串test event，然后通过$event获取这个输出结果，并当做参数传给上一级的方法showEvent

@Output：同输入相同，angular也为我们提供了输出的第二种方式：@Output。用法与@input类似

export class MessagesComponent {
    @Output() newEvent: EventEmitter<string>;
}

C. `host`

@HostBinding()和@HostListener()在自定义指令时非常有用。@HostBinding()可以为指令的宿主元素添加类、样式、属性等，而@HostListener()可以监听宿主元素上的事件。

@Component({
  selector: 'demo-component',
  host: {
    '(click)': 'onClick($event.target)', // 事件
    'role': 'nav', // 属性
    '[class.pressed]': 'isPressed', // 类
  }
})
export class DemoComponent {
  isPressed: boolean = true;
 
  onClick(elem: HTMLElement) {
    console.log(elem);
  }
}

等价于@HostBinding、@HostListener：

@Component({
  selector: 'demo-component'
})
export class DemoComponent {
  @HostBinding('attr.role') role = 'nav';
  @HostBinding('class.pressed') isPressed: boolean = true;
 
  @HostListener('click', ['$event.target'])
  onClick(elem: HTMLElement) {
    console.log(elem);
  }
}

举例说明：实现一个在输入时实时改变字体和边框颜色

import { Directive, HostBinding, HostListener } from '@angular/core'; 
@Directive({  
    selector:'[appRainbow]'      
})

export class RainbowDirective{ 
possibleColors = [
  'darksalmon', 'hotpink', 'lightskyblue', 'goldenrod',   
  'peachpuff', 'mediumspringgreen', 'cornflowerblue', 
  'blanchedalmond', 'lightslategrey'  
];                       
@HostBinding('style.color') color: string; 
@HostBinding('style.borderColor') borderColor: string;    
@HostListener('keydown') onKeydown() {    
    const colorPick =
       Math.floor(Math.random()*this.possibleColors.length);      
    this.color = this.borderColor 
               = this.possibleColors[colorPick];  
}}

说一下上面代码的主要部分：

① 为我们的指令取名为appRainbow
② 定义我们需要展示的所有可能的颜色
③ 定义并用@HostBinding()装饰color和borderColor，用于设置样式
④ 用@HostListener()监听宿主元素的keydown事件，为color和borderColor随机分配颜色

在页面上使用这个指令：

<input appRainbow>

效果如下：

D. `queries` ：类似于`Vue`中的`slot`相关的知识点

ContentChild

等价于@ContentChild：

@Directive({
    selector: 'li'
})
export class ListItem{ }

@Component({
  selector: 'my-list',
  template: `
    <ul>
      <ng-content></ng-content>
    </ul>
  `
})
export class MyListComponent {
  @ContentChild(ListItem) items: QueryList<ListItem>;
}

占位符ng-content支持select属性，即类似vue中的slot的name属性，可以占多个位置。

ContentChildren：通过 Content Projection 方式设置的视图中获取匹配的多个元素，返回的结果是一个 QueryList 集合。

parent.component.ts

import { 
  Component, ContentChildren, QueryList, AfterContentInit
} from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
    selector: 'exe-parent',
    template: `
      <p>Parent Component</p>  
      <ng-content></ng-content>
    `
})
export class ParentComponent implements AfterContentInit {
    
    @ContentChildren(ChildComponent)
    childCmps: QueryList<ChildComponent>;

    ngAfterContentInit() {
        console.dir(this.childCmps);
    }
}

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
    <h4>Welcome to Angular World</h4>
    <exe-parent>
      <exe-child></exe-child>
      <exe-child></exe-child>
    </exe-parent>
  `,
})
export class AppComponent { }

ViewChild和ContentChild的区别是啥呢？ContentChild是通过占位标签<ng-content>来将子组件嵌入父组件；而ViewChild是直接写在父组件的template中（viewChildren就不多加说明喽！）

生命周期钩子

点击上述链接，查看原文...

生命周期的顺序如下图：红色部分钩子angular只会触发一次，而绿色钩子会触发多次。（我不懂：一般情况下，如果要实现check钩子，代码一定要非常简洁&轻量级，不然，分分钟内存泄露。）

import { 
Component, OnInit, Input, DoCheck, AfterContentInit, OnChanges, 
AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy 
} from '@angular/core';
import { SimpleChanges } from '@angular/core/src/metadata/lifecycle_hooks';

let nextId: number = 1;

@Component({
  selector: 'app-test-demo',
  templateUrl: './test-demo.component.html',
  styleUrls: ['./test-demo.component.css']
})
export class TestDemoComponent implements 
    OnChanges, OnInit, DoCheck, 
    AfterContentInit, AfterContentChecked, AfterViewInit, 
    AfterViewChecked, OnDestroy  {

  @Input()
  public stock: string = "";
  logIt(msg: string) {
    console.log(`${nextId++} ${msg}`);
  }

  constructor() {
    this.logIt('-- constructor方法' + this.stock);
  }

  /**当被绑定的输入属性的值发生变化时调用，
    首次调用一定会发生在ngOnInit()之前。*/
   ngOnChanges(changes: SimpleChanges) {
     let currentVal = changes['stock'].currentValue;
     this.logIt('-- ngOnChanges方法' + this.stock);
   }

  /**当Angular完成组件的创建和引入时，将调用此回调。
它也会在Angular显示数据绑定属性时初始化*/
   ngOnInit() {
    this.logIt('-- ngOnInit方法');
   }

 //需要检查组件或指令的输入属性时
   ngDoCheck() {
    this.logIt('-- ngDoCheck');
   }

  //当把内容投影进组件之后调用
   ngAfterContentInit() {
    this.logIt('-- ngAfterContentInit');
   }

   //每次完成被投影组件内容的变更检测之后调用
   ngAfterContentChecked() {
    this.logIt('-- ngAfterContentChecked');
   }
   
   //初始化完组件视图及其子视图之后调用
   ngAfterViewInit() {
    this.logIt('-- ngAfterViewInit');
   }

  //每次做完组件视图和子视图的变更检测之后调用
   ngAfterViewChecked() {
    this.logIt('-- ngAfterViewChecked');
   }

  /**当Angular每次销毁指令/组件之前调用并清扫。
一般切换路由的时候，就会调用该组件的ngOnDestroy接口*/
   ngOnDestroy() {
    this.logIt('-- ngOnDestroy');
   }

}

//调用：
<app-test-demo [stock]="title" ></app-test-demo>

运行效果：

【angular】@Component

几种元数据（属性装饰器）详解

A. 组件的输入 inputs & @Input

B. 组件输出outputs & @Output

C. host

D. queries ：类似于Vue中的slot相关的知识点

生命周期钩子

A. 组件的输入 `inputs` & `@Input`

B. 组件输出`outputs` & `@Output`

C. `host`

D. `queries` ：类似于`Vue`中的`slot`相关的知识点