<ng-content>が他のネストされたコンポーネント（ここのように）内で使用されている場合の動作例を見てきましたが、ルートAngular2コンポーネント内で実行することはできませんでした：
HTMLテンプレート：
<html>
<body>
<app>
<h1>Hello, World!</h1>
</app>
</body>
</html>
TypeScriptのAngular2コンポーネント：
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のデモを参照してください。
これはAngular2の哲学などに反しているので、サポートされていないと思いましたが、私のユースケースは最初に動作するデモと非常に似ています。
例を実行すると、Hello World!読み込み中にどのように表示されるかに気づきましたか？
基本的に、との間のHTMLは<app>、</app>Angularの起動中に何かを表示するために使用されます。
また、ソースから：
アプリケーションは、既存のブラウザーDOM（通常は）内でブートストラップされます
index.html。Angular 1とは異なり、Angular2はでバインディングをコンパイル/処理しませんindex.html。これは主にセキュリティ上の理由と、Angular 2のアーキテクチャの変更によるものです。これは、index.htmlバインディングなどのサーバー側テクノロジーを使用して安全に処理できることを意味します。したがって、バインディングは{{ syntax }}、Angular2コンポーネントのdouble-curlyからの衝突なしにdouble-curlyを使用でき{{ syntax }}ます。
重要な部分はAngular 2 does not compile/process bindings in index.htmlです。したがって、必要なことを実行するにはng-content、子コンポーネントに移動する必要があります。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加