angular input binding 输入型绑定 Content Projection 内容投影

通过输入型绑定可以把把数据从父组件传到子组件。官网的demo比较简单，我试的时候发现父组件不仅可以传递一个普通的属性给子组件，还可以是函数的运行结果，而且这个函数的结果还是不断的变化的。好神奇。

在这里设计2个组件，父组件中在input框中输入值，传递给子组件，同时还传递一个对象和一个函数的运行结果。

父组件的主要代码：

parentSimple = '123';
parentObject = {a: 'aaa', b: 'bbb'};

parentFunction(): any {
    return this.parentSimple;
}

ngDoCheck() {
    console.log('hook check');
    this.parentObject.a = this.parentSimple;
}

父组件中使用了DoCheck钩子，用来修改传递给子组件的对象中的一个属性值。
父组件中的函数parentFunction返回的就是input输入框的值。

父组件的模板主要代码：

<input type="text" [(ngModel)]="parentSimple">

<app-child [inputSimple]="parentSimple"  [inputObject]="parentObject" [inputFunction]="parentFunction()"></app-child>

子组件的接收3个输入属性：

@Input() inputSimple: String;
@Input() inputObject: Object;
@Input() inputFunction: String;

inputObjectString = ''; //为了在子组件的模板中显示出父组件传递的对象

子组件的模板：

<br/>
我是子组件中的输入属性(简单值)：{{inputSimple}}
<br/>**重点内容**
我是子组件中的输入属性(object)：{{inputObjectString}}
<br/>
我是子组件中的输入属性(function())：{{inputFunction}}
<br/>

content projection

父组件把某些东东通过输入型的绑定交给子组件之后就不管了，传递过去的内容的样式和行为等等也不再收到父组件的控制，如果父组件还想对传递过去的东东加以控制的话，可以使用内容投影（Content Projection）。
比如在父组件的模板中的app-child的标签中加入这样的一段代码，

  <h3 (click)="eject()">我来自父组件的内容投射</h3>

同时定义样式：

app-child h3{
  color:red;
}

还有点击事件：

eject() {
    alert('eject');
}

子组件加上：

<ng-content></ng-content>

多个投影

想要进行投影多个部分到子组件的不同地方，可以对子组件的 ng-content 加上一个select选择器，如下面的例子，父组件组件投影 .one 和 .two两部分到子组件。 不过我发现不能使用id选择器。

  <h3 (click)="eject()" class="one">我来自父组件的内容投射#one</h3>
  <h4 (click)="eject()" class="two">我来自父组件的内容投射#two</h4>

<ng-content select=".two"></ng-content>

<ng-content select=".one"></ng-content>