NgComponentOutlet
Instantiates a single Componenttype and inserts its Host View into current View. NgComponentOutlet provides a declarative approach for dynamic component creation.
NgModule
选择器
属性
| 属性 | 说明 |
|---|---|
@Input() | |
@Input() | |
@Input() | |
@Input() |
说明
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: Optional customInjectorthat will be used as parent for the Component. Defaults to the injector of the current view container.ngComponentOutletContent: Optional list of projectable nodes to insert into the content section of the component, if exists.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>
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});
}
}
方法
参数没有参数。 |
