componente principale Angular2 con <ng-content>

Ho visto esempi di lavoro quando <ng-content> e stat utilizzato all'interno di altri componenti nidificati (come qui http://plnkr.co/edit/Hn393B9fJN6zgfaz54tn), ma non sono riusciti a farlo funzionare all'interno di un componente principale Angular2: templatecomponente principale Angular2 con <ng-content>

HTML:

<html> 
    <body> 
     <app> 
      <h1>Hello, World!</h1> 
     </app> 
    </body> 
</html>

componente Angular2 a macchina:

import {Component, View, bootstrap} from 'angular2/angular2'; 

@Component({ 
    selector: 'app' 
}) 
@View({ 
    template: 'Header: <ng-content></ng-content>', 
}) 
export class App { 
} 

bootstrap(App);

mi aspetto che questo genererà:

<app> 
    Header: <h1>Hello, World!</h1> 
</app>

ma non è così e il contenuto di <app> viene ignorato. Guarda la demo su Plunker http://plnkr.co/edit/dJlA4SQpy8pnrdyDiy9u.

Ho pensato che forse questo va di nuovo in qualche filosofia Angular2 o qualcosa del genere quindi non è nemmeno supportato ma il mio caso d'uso è molto simile al primo working demo che penso.

fonte

2015-09-14 martin

Quando si esegue l'esempio, si è notato come viene visualizzato Hello World! durante il caricamento?

Fondamentalmente il codice HTML compreso tra <app> e </app> viene utilizzato per visualizzare qualcosa durante l'avvio di Angular.

Inoltre, dal source:

Un'applicazione viene bootstrap all'interno di un browser esistente DOM, tipicamente index.html. A differenza di Angular 1, Angular 2 non compila/processa i binding in index.html. Questo è principalmente per motivi di sicurezza, così come i cambiamenti architetturali in Angular 2. Ciò significa che index.html può essere tranquillamente elaborato utilizzando tecnologie lato server come i binding. I binding possono quindi utilizzare double-curly {{ syntax }} senza collisione da componente angolare 2 double-curly {{ syntax }}.

La parte importante è Angular 2 does not compile/process bindings in index.html. Quindi, per fare ciò che vuoi, dovrai spostare ng-content in un componente figlio.

fonte

2015-09-14 22:10:26

Spendi letteralmente una settimana cercando di eseguire il debug di questo, non comprendendo perché 'content' è diventato' ng-content', e perché non sarebbe stato sostituito quando sarebbe stato 'content'. – Skeen

ora capisco perché non stava funzionando –

sembra che 'ng-content' non funzioni in angolare 2 beta1 –

Risulta che è possibile, se si intende fornire contenuto testuale. Se si desidera componenti angolari, è possibile con l'elemento HTML corretto (noscript). Un po 'hacky, si potrebbe dire. Il trucco sta usando un elemento <noscript>.

modello 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 principale:

import {Component, bootstrap} from 'angular2/angular2'; 

@Component({ 
    selector: 'app', 
    template: 'Header: ' + window.mainTemplate , 
}) 
export class App { 
} 

bootstrap(App);

assicurarsi che il codice angolare 2 viene dopo la definizione del modello.

si applica solo se si utilizza un tag <template>: Il problema è che dal momento che di recente (http://angularjs.blogspot.com.br/2016/02/angular-2-templates-will-it-parse.html) angolare 2 porta il proprio parser, i modelli sono case-sensitive. Non è il caso dell'HTML in un ambiente browser. Significa che il browser non può mantenere il caso in attributi ed elementi su questo modello di hack.

UPDATE: Ho avuto un elemento <template> nella soluzione originale. A <noscript> è molto meglio come non dovrebbe essere una conversione di alcun caso.

fonte

2016-02-16 22:30:30

Grazie per questa soluzione. Ho usato il tag 'script' invece del tag' template'. – allenhwkim

Uno script con un tipo personalizzato dovrebbe funzionare. Ho cambiato la risposta a 'noscript' in quanto è più semplice. –

componente principale Angular2 con <ng-content>

risposta

Problemi correlati