动态内容投影是一个非常有用的模式,可以使组件更加灵活,以适应各种情况下的不同需求。在 Angular 中,我们可以使用 ng-content 指令来实现动态内容投影。具体来说,我们可以在组件模板中使用 ng-content 标记指定一个插槽,然后在组件的父组件中通过这个插槽来插入内容。以下是一个示例:
组件模板:
{{ title }}
父组件模板:
This is the content
在上面的示例中,我们创建了一个名为 app-custom-component 的组件,并在其中定义了一个 ng-content 插槽。然后,我们在父组件模板中使用 app-custom-component 组件,并在其中插入了一段内容。由于我们使用了插槽,这段内容将被动态地插入到 app-custom-component 组件中。
需要注意的是,我们可以定义多个插槽,并使用选择器来指定它们。例如:
组件模板:
{{ title }}
父组件模板:
This is the header
This is the content
在上面的示例中,我们定义了两个插槽,分别使用了 .header 和 .content 选择器来指定它们。在父组件模板中,我们为这两个插槽分别插入了一段内容。由于我们使用