在Angular中,可以使用内容投影(Content Projection)来实现父组件向其子组件传递内容。
下面是一个示例,展示了父组件和两个子组件之间的内容投影:
父组件内容
子组件1内容
子组件2内容
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.css']
})
export class ParentComponent { }
import { Component } from '@angular/core';
@Component({
selector: 'app-child1',
templateUrl: './child1.component.html',
styleUrls: ['./child1.component.css']
})
export class Child1Component { }
import { Component } from '@angular/core';
@Component({
selector: 'app-child2',
templateUrl: './child2.component.html',
styleUrls: ['./child2.component.css']
})
export class Child2Component { }
现在,当在父组件中使用子组件时,可以通过
标签将内容传递给子组件:
子组件1的内容
子组件2的内容
在上述示例中,父组件的内容将显示在
标签中,子组件1和子组件2的内容将通过内容投影插入到对应的
标签中。