angular - container - ng-template
Componente raíz Angular2 con<ng-content> (2)
He visto ejemplos de trabajo cuando se está utilizando <ng-content> dentro de otros componentes anidados (como aquí http://plnkr.co/edit/Hn393B9fJN6zgfaz54tn ) pero no he podido ejecutarlo dentro de un componente Angular2 raíz:
Plantilla HTML:
<html>
<body>
<app>
<h1>Hello, World!</h1>
</app>
</body>
</html>
Componente Angular2 en mecanografiado:
import {Component, View, bootstrap} from ''angular2/angular2'';
@Component({
selector: ''app''
})
@View({
template: ''Header: <ng-content></ng-content>'',
})
export class App {
}
bootstrap(App);
Espero que esto genere:
<app>
Header: <h1>Hello, World!</h1>
</app>
pero no lo hace y el contenido de <app> se ignora. Vea la demostración en Plunker http://plnkr.co/edit/dJlA4SQpy8pnrdyDiy9u .
Pensé que tal vez esto va de nuevo con alguna filosofía Angular2 o algo así que ni siquiera es compatible, pero creo que mi caso de uso es muy similar al de la primera http://plnkr.co/edit/Hn393B9fJN6zgfaz54tn .
Cuando ejecutaste tu ejemplo, ¿notaste cómo Hello World! se muestra durante la carga?
Básicamente, el html entre <app> y </app> se usa para mostrar algo mientras se está iniciando Angular.
Además, desde la source :
Una aplicación es bootstrapped dentro de un DOM de navegador existente, típicamente
index.html. A diferencia de Angular 1, Angular 2 no compila / procesa enlaces enindex.html. Esto se debe principalmente a razones de seguridad, así como a cambios arquitectónicos en Angular 2. Esto significa queindex.htmlpuede procesarse de forma segura utilizando tecnologías del lado del servidor, como los enlaces. Por lo tanto, los enlaces pueden utilizar la{{ syntax }}de doble curvatura sin colisión desde el componente 2 de Angular 2 de doble curvatura{{ syntax }}.
La parte importante que es Angular 2 does not compile/process bindings in index.html . Por lo tanto, para hacer lo que quiere, tendrá que mover ng-content a un componente secundario.
Resulta que es posible, si tiene la intención de proporcionar contenido de texto. Si desea componentes angulares, es posible con el elemento HTML correcto (noscript). Un poco hacky, se podría decir. El truco es usar un elemento <noscript> .
Plantilla HTML:
<noscript id="appContent">
<h1>Hello, World!</h1>
<a [routerLink]="[''Home'']">Home</a>
</noscript>
<script>
var mainTemplate = document.getElementById(''appContent'');
window.mainTemplate = mainTemplate.innerText;
</script>
Componente raíz:
import {Component, bootstrap} from ''angular2/angular2'';
@Component({
selector: ''app'',
template: ''Header: '' + window.mainTemplate ,
})
export class App {
}
bootstrap(App);
Asegúrese de que su código de Angular 2 viene después de la definición de la plantilla.
Solo se aplica si utiliza una etiqueta <template> : el problema es que recientemente ( http://angularjs.blogspot.com.br/2016/02/angular-2-templates-will-it-parse.html ) Angular 2 trae su propio analizador, las plantillas distinguen entre mayúsculas y minúsculas. No es el caso de HTML en un entorno de navegador. Esto significa que el navegador no puede mantener el caso en los atributos y elementos de este truco de plantilla.
ACTUALIZACIÓN : Tenía un elemento <template> en la solución original. Un <noscript> es mucho mejor ya que no debería haber ninguna conversión de casos.