Soy nuevo en angular en general y en angular2 específicamente. Estoy tratando de escribir un componente de contenedor, que debería tener componentes secundarios.
Por ejemplo, componente contenedor :
@Component({ selector: 'my-list', template: ` <ul> <ng-content></ng-content> </ul> ` }) export class MyList { }Componente hijo:
import { Component } from 'angular2/core' @Component({ selector: 'my-item', template: ` <li> <ng-content></ng-content> </li> ` }) export class MyItem { }Me gustaría hacer esta estructura:
<my-list> <my-item>One</my-item> <my-item>Two</my-item> </my-list>Que se rinda al siguiente:
<my-list> <ul> <li>One</li> <li>Two</li> </ul> </my-list>Pero en cambio, tengo el elemento host del contenedor y los elementos también conservados:
<my-list> <ul> <my-item> <li>One</li> </my-item> <my-item> <li>Two</li> </my-item> </ul> </my-list>Pregunta: ¿hay alguna forma de eliminar los elementos host y dejar solo la plantilla renderizada?
Esto deberías obtener lo que quieres:
@Component({ selector: 'ul[my-list]', template: ` <ng-content></ng-content> ` }) export class MyList { } @Component({ selector: 'li[my-item]', template: ` <ng-content></ng-content> ` }) export class MyItem { ... } <ul my-list> <li my-item>One</li my-item> <li my-item>Two</li my-item> </ul my-list>Finalmente encontré la solución: inyectar ElementRef en MyItem y usar su nativeElement.innerHTML :
Mi lista :
import { Component, ContentChildren, QueryList } from 'angular2/core' import { MyItem } from './myitem' @Component({ selector: 'my-list', template: ` <ul> <li *ngFor="#item of items" [innerHTML]="item.innerHTML"></li> </ul> ` }) export class MyList { @ContentChildren(MyItem) items: QueryList<MyItem> }Mi artículo:
import { Directive, Inject, ElementRef } from 'angular2/core' @Directive({selector: 'my-item'}) export class MyItem { constructor(@Inject(ElementRef) element: ElementRef) { this.innerHTML = element.nativeElement.innerHTML } }Las nuevas versiones angulares tienen una directiva realmente genial, que también se puede usar para su caso de uso. Tadaa: NgComponentOutlet . Feliz codificación ;)
Ejemplo:
@Component({selector: 'hello-world', template: 'Hello World!'}) class HelloWorld { } @Component({ selector: 'ng-component-outlet-simple-example', template: `<ng-container *ngComponentOutlet="HelloWorld"></ng-container>` }) class NgTemplateOutletSimpleExample { // This field is necessary to expose HelloWorld to the template. HelloWorld = HelloWorld; }