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">我来自父组件的内容投射#oneh3><h4 (click)="eject()" class="two">我来自父组件的内容投射#twoh4>

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！