填寫這份《一分鐘調查》,幫我們(開發組)做得更好!去填寫Home

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()
ngComponentOutlet: Type<any>
@Input()
ngComponentOutletInjector: Injector
@Input()
ngComponentOutletContent: any[][]
@Input()
ngComponentOutletNgModuleFactory: NgModuleFactory<any>

說明

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 custom Injectorthat 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});
  }
}
    

方法

      
      ngOnChanges(changes: SimpleChanges)
    
引數
changes SimpleChanges
      
      ngOnDestroy()
    
引數

沒有引數。