Angular2 корневой компонент с <ng-content>

Я видел рабочие примеры, когда <ng-content> используется в других вложенных компонентах (например, здесь http://plnkr.co/edit/Hn393B9fJN6zgfaz54tn), но мне не удалось запустить его внутри корневого компонента Angular2:

HTML-шаблон:

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

Angular2 в typescript:

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

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

bootstrap(App);

Я ожидаю, что это сгенерирует:

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

но это не так, и содержимое <app> игнорируется. См. Демонстрацию на Plunker http://plnkr.co/edit/dJlA4SQpy8pnrdyDiy9u.

Я подумал, что, может быть, это снова связано с какой-то философией Angular2 или чем-то, что даже не поддерживается, но мой пример использования очень похож на первую рабочую демонстрацию, я думаю.

Ответы

Ответ 1

Когда вы запускаете свой пример, заметили ли вы, как Hello World! отображается во время загрузки?

В основном html между <app> и </app> используется для отображения чего-либо, пока загружается Angular.

Кроме того, из источника:

Приложение загружается в существующий браузер DOM, обычно index.html. В отличие от Angular 1, Angular 2 не компилирует/обрабатывает привязки в index.html. Это связано главным образом с соображениями безопасности, а также с архитектурными изменениями в Angular 2. Это означает, что index.html можно безопасно обрабатывать с использованием серверных технологий, таких как привязки. Таким образом, привязки могут использовать двойную фигуру {{ syntax }} без столкновения из Angular 2 компонента с двойным курением {{ syntax }}.

Важной частью является Angular 2 does not compile/process bindings in index.html. Итак, чтобы сделать то, что вы хотите, вам придется переместить ng-content на дочерний компонент.

Ответ 2

Оказывается, это возможно, если вы намерены предоставить текстовое содержимое. Если вам нужны компоненты Angular, это возможно с помощью правильного HTML-элемента (noscript). Можно сказать, немного взломанный. Трюк использует элемент <noscript>.

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>

Корневой компонент:

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

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

bootstrap(App);

Убедитесь, что ваш код Angular 2 появился после определения шаблона.

Применяется только в том случае, если вы используете тег <template>: catch - это то, что с недавнего времени (http://angularjs.blogspot.com.br/2016/02/angular-2-templates-will-it-parse.html) Angular 2 приносит свои собственный парсер, шаблоны чувствительны к регистру. Это не относится к HTML в среде браузера. Это означает, что браузер не может хранить этот аргумент в атрибутах и ​​элементах этого шаблона.

UPDATE. У меня был элемент <template> в исходном решении. A <noscript> намного лучше, чем не должно быть преобразование в любом случае.