Angular2根组件

发布时间：2020-12-17 07:48:24 所属栏目：安全来源：网络整理

导读：在 ng-content中,我看到了工作示例是在其他嵌套组件中使用(像这里的 http://plnkr.co/edit/Hn393B9fJN6zgfaz54tn),但是我没有设法在根Angular2组件中运行它： HTML模板： html body app h1Hello,World!/h1 /app /body /html 字体中的Angular2组件： import {

在< ng-content>中,我看到了工作示例是在其他嵌套组件中使用(像这里的 http://plnkr.co/edit/Hn393B9fJN6zgfaz54tn),但是我没有设法在根Angular2组件中运行它：

HTML模板：

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

字体中的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 http://plnkr.co/edit/dJlA4SQpy8pnrdyDiy9u演示.

我认为也许这会再次出现一些Angular2的哲学或者其他东西,所以它甚至不被支持,但我的用例非常类似于我认为的第working demo号.

当你运行你的例子时,你注意到Hello World！在加载过程中显示？

基本上,< app>之间的html和< / app>用于在Angular启动时显示某些内容.

另外,从source：

An application is bootstrapped inside an existing browser DOM,typically index.html. Unlike Angular 1,Angular 2 does not compile/process bindings in index.html. This is mainly for security reasons,as well as architectural changes in Angular 2. This means that index.html can safely be processed using server-side technologies such as bindings. Bindings can thus use double-curly {{ syntax }} without collision from Angular 2 component double-curly {{ syntax }}.

重要的部分是角度2不会在index.html中编译/处理绑定.所以,为了做你想要的,你必须将内容移动到一个子组件.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!