for - Angular2: reemplazar elemento host con plantilla de componente
ng-template angular 5 (4)
Soy nuevo en angular en general y en angular2 específicamente. Estoy tratando de escribir un componente contenedor, que debería tener componentes hijos en él.
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>
Para ser rendido 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 preservados también:
<my-list>
<ul>
<my-item>
<li>One</li>
</my-item>
<my-item>
<li>Two</li>
</my-item>
</ul>
</my-list>
Pregunta: ¿hay una manera de eliminar los elementos del host y dejar solo la plantilla renderizada?
En el último ángulo, incluso puede evitar agregar <ng-content></ng-content>
He aplicado es como
import {Component} from ''@angular/core'';
@Component({
selector: ''div[app-root]'',
templateUrl: ''app.component.html'',
styleUrls: [''app.component.css'']
})
export class AppComponent {
title = ''Delegates Presence Reporting'';
}
y la plantilla:
<div class="centered">
<h1>{{title}}</h1>
</div>
index.html
<body>
<div app-root></div>
</body>
Esto deberías conseguir 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>
</li my-list>
Finalmente encontré la solución: inyectar ElementRef a MyItem y usar su nativeElement.innerHTML :
MyList :
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>
}
MyItem:
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 puede usarse 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;
}