Angular ContentChild
contentchild
// 使用方法
git clone https://git.oschina.net/mumu-osc/learn-component.git
cd learn-component
git pull origin contentchild
npm install
ng serve
<!-- test-content-child.component.html -->
<div class="panel panel-primary">
<div class="panel-heading">父组件</div>
<div class="panel-body">
<child-one>
<h3>投影的标题</h3>
<p>投影的底部</p>
<child-two></child-two>
<child-two></child-two>
<child-two></child-two>
<child-two></child-two>
<child-two></child-two>
<child-two></child-two>
<child-two></child-two>
<child-two></child-two>
</child-one>
</div>
</div>
<!-- child-one.component.html -->
<div class="panel panel-primary">
<div class="panel-heading">
<ng-content select="h3"></ng-content>
</div>
<div class="panel-body">
<ng-content select="child-two"></ng-content>
</div>
<div class="panel-footer">
<ng-content select="p"></ng-content>
</div>
</div>
// child-one.component.ts
import { Component, ContentChild, ContentChildren, ElementRef, OnInit, QueryList } from '@angular/core';
import { ChildTwoComponent } from '../child-two/child-two.component';
@Component({
selector: 'child-one',
templateUrl: './child-one.component.html',
styleUrls: ['./child-one.component.scss']
})
export class ChildOneComponent implements OnInit {
// @ContentChild(ChildTwoComponent)
// childTwo:ChildTwoComponent;
@ContentChildren(ChildTwoComponent) childrenTwo:QueryList<ChildTwoComponent>;
constructor() { }
ngOnInit() {
}
ngAfterContentInit():void{
// console.log(this.childTwo);
this.childrenTwo.forEach((item)=>{
console.log(item);
});
}
}
什么是ContentChild
contentchild与viewchild作用非常相似,区别在于contentchild比viewchild多了一个布局功能
比如以上代码中的p标签的内容,就显示在child-one组件的最底部