在Angular 9中,可以使用ng-content来动态更新内容。下面是一个示例代码,演示了如何使用ng-content来实现动态更新。
首先,创建一个父组件,其中包含一个ng-content标签和一个按钮。点击按钮时,将更新ng-content的内容。
Parent Component
// parent.component.ts
import { Component, ContentChild, ElementRef } from '@angular/core';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.css']
})
export class ParentComponent {
@ContentChild('content', { static: false, read: ElementRef }) content: ElementRef;
updateContent() {
const newContent = 'New Content';
this.content.nativeElement.innerHTML = newContent;
}
}
然后,在父组件中使用ng-content标签,并给ng-content一个模板引用变量名。
App Component
Initial Content
这样,当点击父组件中的按钮时,ng-content中的内容会被更新为"New Content"。
请注意,ng-content只能用于传递静态内容。如果要传递动态组件,请使用ng-template和ngTemplateOutlet指令。