Angular ng-content @ContentChild @ContentChildren

澹台承载
2023-12-01

组件1.html

<div>
	<ng-content select="button"></ng-content>
	<ng-content select="组件2的selector"></ng-content>
</div>

父组件.html

<组件1>
	<button type="button">button</button>
	<组件2></组件2>
</组件1>

—————————————————————————————————————————————

组件1.html

<组件1>
	<组件2></组件2>
</组件1>

组件1.component.ts

import {
	ContentChild
} from '@angular/core';
@ContentChild(组件2Component类名) v : 组件2Component类名;
//可在生命周期钩子函数 ngAfterContentInit中使用v

—————————————————————————————————————————————
组件1.html

<组件1>
	<组件2></组件2>
	<组件2></组件2>
	<组件2></组件2>
	<组件2></组件2>
	<组件2></组件2>
</组件1>

组件1.component.ts

import {
	ContentChildren,
	QueryList
} from '@angular/core';
@ContentChildren(组件2Component类名) v : QueryList<组件2Component类名>;
//可在生命周期钩子函数 ngAfterContentInit中使用v
 类似资料: