Question

我有AngularJS的经验，并开始学习Angular2。我正处于学习之旅的最初阶段，但我已经陷入困境。

我可以让我的一个组件渲染，而不是另一个。我正在使用Visual Studio 2013 Ultimate和TypeScript 1.5 beta。这是来源：

的index.html

<html>
    <head>
        <title>Angular 2 Quickstart</title>
        <script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
        <script src="https://jspm.io/system.js"></script>
        <script src="https://code.angularjs.org/2.0.0-alpha.28/angular2.dev.js"></script>
    </head>
    <body>

        <!-- The app component created in app.ts -->
        <my-app></my-app>
        <display></display>
        <script>
            System.import('app');
            System.import('displ');
        </script>
    </body>
</html>

app.ts

/// <reference path="d:/npm/typings/angular2/angular2.d.ts" />

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

// Annotation section
@Component({
    selector: 'my-app',
})

@View({
    template: '<h1>Hello {{ name }}</h1>',
})

// Component controller
export class MyAppComponent {
    name: string;

    constructor() {
        this.name = 'Alice';
    }
}

bootstrap(MyAppComponent);

displ.ts

/// <reference path="d:/npm/typings/angular2/angular2.d.ts" />

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

// Annotation section
@Component({
    selector: 'display'
})

@View({
    template: '<h1>xxxHello {{ name }}</h1>',
})

// Component controller
export class DisplayComponent {
    name: string;

    constructor() {
        this.name = 'Bob';
    }
}

结果很简单：

Hello Alice

鲍勃去哪儿了？

谢谢！

更新

我意识到我试图以错误的方式做到这一点。我的意图是将display组件嵌套在my-app组件中，但my-app的模板不包含必要的组件：

它没有包含<display></display>元素。这被包含在顶级index.html中，这是错误的地方。
视图注释并未将显示组件包含为指令参考。

简而言之，我应该拥有的是：

app.ts（查看注释）

@View({
    template: '<h1>Hello {{ name }}</h1><display></display>',
    directives: [DisplayComponent]
})

我还必须将我的显示组件导入app.ts：

import { DisplayComponent } from 'displ';

Answer 1

请添加bootstrap(DisplayComponent);，因为nada已经指出。

来自quickstart：

bootstrap（）函数将一个组件作为参数，启用要呈现的组件（以及它包含的任何子组件）。

所以是的，你真的需要为所有组件调用bootstrap，除非他们是另一个组件的孩子。

Angular2组件未呈现

1 个答案: