在Angular 8中,你可以使用createEmbeddedView()
方法来动态创建一个嵌入式视图,并将其附加到一个指定的视图容器中。这个方法的第一个参数是一个TemplateRef
对象,它代表了要创建的视图模板。第二个参数是一个上下文对象,它可以在视图模板中使用。
下面是一个使用createEmbeddedView()
方法的示例代码:
@ViewChild
装饰器来获取到视图容器的引用。假设你的视图容器有一个名为viewContainer
的模板变量。import { Component, ViewChild, TemplateRef, ViewContainerRef } from '@angular/core';
@Component({
selector: 'app-my-component',
template: `
`
})
export class MyComponent {
@ViewChild('viewContainer', { read: ViewContainerRef }) viewContainer: ViewContainerRef;
}
createEmbeddedView()
方法来创建一个嵌入式视图,并将其附加到视图容器中。第一个参数是一个TemplateRef
对象,它代表了要创建的视图模板。第二个参数是一个上下文对象,它可以在视图模板中使用。import { Component, ViewChild, TemplateRef, ViewContainerRef } from '@angular/core';
@Component({
selector: 'app-my-component',
template: `
`
})
export class MyComponent {
@ViewChild('viewContainer', { read: ViewContainerRef }) viewContainer: ViewContainerRef;
@ViewChild('myTemplate') myTemplate: TemplateRef;
createView() {
const context = {
message: 'Hello World!'
};
this.viewContainer.clear();
this.viewContainer.createEmbeddedView(this.myTemplate, context);
}
}
在上面的示例代码中,我们在createView()
方法中使用createEmbeddedView()
方法来创建一个嵌入式视图,并将其附加到视图容器中。我们也传递了一个context
对象作为第二个参数,它包含了一个message
属性,可以在视图模板中使用。
{{ message }}
在上面的示例代码中,我们使用let-message="message"
来声明一个名为message
的模板变量,并在标签中使用它来显示传递的消息。
这就是使用createEmbeddedView()
方法与上下文的示例。当你点击"Create View"按钮时,将会创建一个包含传递消息的嵌入式视图,并将其附加到视图容器中。