Ejemplo de Angular NgComponentOutlet

directive

Crea una sola instancia Component escriba e inserta su Vista de host en la Vista actual. NgComponentOutlet proporciona un enfoque declarativo para la creación de componentes dinámicos.

Ver más…

Exportado de

• CommonModule

Selectores

• [ngComponentOutlet]

Propiedades

Descripción

NgComponentOutlet requiere un tipo de componente, si se establece un valor falso, la vista se borrará y cualquier componente existente será destruido.

Control de ajuste fino

Puede controlar el proceso de creación de componentes utilizando los siguientes opcionales attributes:

• ngComponentOutletInjector: Personalizado opcional Injector que se utilizará como padre del componente. Por defecto, el inyector del contenedor de vista actual.

• ngComponentOutletContent: Lista opcional de nodos proyectables para insertar en la sección de contenido del componente, si existe.

• ngComponentOutletNgModuleFactory: Fábrica de módulos opcional para permitir la carga dinámica de otro módulo y luego cargar un componente de ese módulo.

Sintaxis

Simple

Inyector / contenido personalizado

NgModuleFactory personalizado

Un simple ejemplo

@Component(selector:'hello-world', template:'Hello World!')exportclassHelloWorld@Component(
  selector:'ng-component-outlet-simple-example',
  template:``)exportclassNgComponentOutletSimpleExample// This field is necessary to expose HelloWorld to the template.
  HelloWorld = HelloWorld;

Un ejemplo más completo con opciones adicionales:

@Injectable()exportclassGreeter
  suffix ='!';@Component(
  selector:'complete-component',
  template:`Complete:   greeter.suffix `)exportclassCompleteComponentconstructor(public greeter: Greeter)@Component(
  selector:'ng-component-outlet-complete-example',
  template:`
    `)exportclassNgComponentOutletCompleteExample// 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);

Métodos