NgComponentOutlet
实例化单个 Component类型，并将其宿主视图插入当前视图。NgComponentOutlet 为动态组件创建提供了一种声明式方法。
Instantiates a single Componenttype and inserts its Host View into current View. NgComponentOutlet provides a declarative approach for dynamic component creation.
Exported from
选择器
属性
| 属性 | 说明 |
|---|---|
@Input() | |
@Input() | |
@Input() | |
@Input() |
说明
NgComponentOutlet 所需的组件类型，如果设置为假值，则视图将被清除并且任何现有组件将被销毁。
NgComponentOutlet requires a component type, if a falsy value is set the view will clear and any existing component will get destroyed.
微调控制
Fine tune control
你可以使用以下可选属性来控制组件的创建过程：
You can control the component creation process by using the following optional attributes:
ngComponentOutletInjector：可选的自定义Injector，将用作此组件的父级。默认为当前视图容器的注入器。ngComponentOutletInjector: Optional customInjectorthat will be used as parent for the Component. Defaults to the injector of the current view container.ngComponentOutletContent：要插入到组件内容部分的可投影节点的可选列表（如果存在）。ngComponentOutletContent: Optional list of projectable nodes to insert into the content section of the component, if exists.ngComponentOutletNgModuleFactory：可选模块工厂，允许动态加载其他模块，然后从该模块加载组件。ngComponentOutletNgModuleFactory: Optional module factory to allow dynamically loading other module, then load a component from that module.
语法
Syntax
简单
Simple
<ng-container *ngComponentOutlet="componentTypeExpression"></ng-container>
定制的注入器/内容
Customized injector/content
<ng-container *ngComponentOutlet="componentTypeExpression;
injector: injectorExpression;
content: contentNodesExpression;">
</ng-container>
定制的 ngModuleFactory
Customized ngModuleFactory
<ng-container *ngComponentOutlet="componentTypeExpression;
ngModuleFactory: moduleFactory;">
</ng-container>
一个简单的例子
A simple example
@Component({selector: 'hello-world', template: 'Hello World!'})
export class HelloWorld {
}
@Component({
selector: 'ng-component-outlet-simple-example',
template: `<ng-container *ngComponentOutlet="HelloWorld"></ng-container>`
})
export class NgComponentOutletSimpleExample {
// This field is necessary to expose HelloWorld to the template.
HelloWorld = HelloWorld;
}
A more complete example with additional options:
@Injectable()
export class Greeter {
suffix = '!';
}
@Component({
selector: 'complete-component',
template: `Complete: <ng-content></ng-content> <ng-content></ng-content>{{ greeter.suffix }}`
})
export class CompleteComponent {
constructor(public greeter: Greeter) {}
}
@Component({
selector: 'ng-component-outlet-complete-example',
template: `
<ng-container *ngComponentOutlet="CompleteComponent;
injector: myInjector;
content: myContent"></ng-container>`
})
export class NgComponentOutletCompleteExample {
// This field is necessary to expose CompleteComponent to the template.
CompleteComponent = CompleteComponent;
myInjector: Injector;
myContent = [[document.createTextNode('Ahoj')], [document.createTextNode('Svet')]];
constructor(injector: Injector) {
this.myInjector =
Injector.create({providers: [{provide: Greeter, deps: []}], parent: injector});
}
}
方法
参数没有参数。 |
