填写这份《一分钟调查》，帮我们（开发组）做得更好！去填写Home
API 参考手册
API > @angular/common

NgComponentOutlet

Instantiates a single Componenttype and inserts its Host View into current View. NgComponentOutlet provides a declarative approach for dynamic component creation.

查看"说明"...

NgModule

选择器

属性

属性说明
@Input()
ngComponentOutlet: Type<any>
@Input()
ngComponentOutletInjector: Injector
@Input()
ngComponentOutletContent: any[][]
@Input()
ngComponentOutletNgModuleFactory: NgModuleFactory<any>

说明

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:

Syntax

Simple

<ng-container *ngComponentOutlet="componentTypeExpression"></ng-container>
      
      <ng-container *ngComponentOutlet="componentTypeExpression"></ng-container>

Customized injector/content

<ng-container *ngComponentOutlet="componentTypeExpression; injector: injectorExpression; content: contentNodesExpression;"> </ng-container>
      
      <ng-container *ngComponentOutlet="componentTypeExpression;
                                  injector: injectorExpression;
                                  content: contentNodesExpression;">
</ng-container>

Customized ngModuleFactory

<ng-container *ngComponentOutlet="componentTypeExpression; ngModuleFactory: moduleFactory;"> </ng-container>
      
      <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 NgTemplateOutletSimpleExample { // This field is necessary to expose HelloWorld to the template. HelloWorld = HelloWorld; }
      
      
  1. @Component({selector: 'hello-world', template: 'Hello World!'})
  2. export class HelloWorld {
  3. }
  4.  
  5. @Component({
  6.   selector: 'ng-component-outlet-simple-example',
  7.   template: `<ng-container *ngComponentOutlet="HelloWorld"></ng-container>`
  8. })
  9. export class NgTemplateOutletSimpleExample {
  10.   // This field is necessary to expose HelloWorld to the template.
  11.   HelloWorld = HelloWorld;
  12. }

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 NgTemplateOutletCompleteExample { // 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}); } }
      
      
  1. @Injectable()
  2. export class Greeter {
  3.   suffix = '!';
  4. }
  5.  
  6. @Component({
  7.   selector: 'complete-component',
  8.   template: `Complete: <ng-content></ng-content> <ng-content></ng-content>{{ greeter.suffix }}`
  9. })
  10. export class CompleteComponent {
  11.   constructor(public greeter: Greeter) {}
  12. }
  13.  
  14. @Component({
  15.   selector: 'ng-component-outlet-complete-example',
  16.   template: `
  17.     <ng-container *ngComponentOutlet="CompleteComponent; 
  18.                                       injector: myInjector; 
  19.                                       content: myContent"></ng-container>`
  20. })
  21. export class NgTemplateOutletCompleteExample {
  22.   // This field is necessary to expose CompleteComponent to the template.
  23.   CompleteComponent = CompleteComponent;
  24.   myInjector: Injector;
  25.  
  26.   myContent = [[document.createTextNode('Ahoj')], [document.createTextNode('Svet')]];
  27.  
  28.   constructor(injector: Injector) {
  29.     this.myInjector =
  30.         Injector.create({providers: [{provide: Greeter, deps: []}], parent: injector});
  31.   }
  32. }

方法

ngOnChanges()

ngOnChanges(changes: SimpleChanges)
      
      ngOnChanges(changes: SimpleChanges)
参数
changes SimpleChanges

ngOnDestroy()

ngOnDestroy()
      
      ngOnDestroy()
参数

没有参数。