Typescript 未渲染Angular2组件_Typescript_Angular

Typescript 未渲染Angular2组件

typescript angular

Typescript 未渲染Angular2组件,typescript,angular,Typescript,Angular,我在AngularJS方面有经验，现在开始学习Angular2。我的学习之旅刚刚开始，但我已经陷入困境我可以让其中一个组件渲染，但另一个组件不行。我正在使用Visual Studio 2013 Ultimate和TypeScript 1.5测试版。以下是消息来源： index.html <html> <head> <title>Angular 2 Quickstart</title> <script

我在AngularJS方面有经验，现在开始学习Angular2。我的学习之旅刚刚开始，但我已经陷入困境

我可以让其中一个组件渲染，但另一个组件不行。我正在使用Visual Studio 2013 Ultimate和TypeScript 1.5测试版。以下是消息来源：

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

：

import { DisplayComponent } from 'displ';

请添加

引导（DisplayComponent）正如已经指出的
从：
bootstrap（）函数将组件作为参数，启用
要渲染的组件（以及它包含的任何子组件）
因此，是的，您确实需要为所有组件调用bootstrap
，除非它们是另一个组件的子组件。
bootstrap（DisplayComponent）？@nada是否需要引导每个组件？通常我们只需要引导根组件，并将其他组件作为指令放入其中。这是我们只需要引导根。如果你分别引导这两个组件，它们将是两个独立的Angular 2应用程序，好吧，因为我对这个非常陌生，我刚刚意识到我必须在第一个组件中包含我的第二个组件作为一个指令……除了使用指令之外，有没有其他方法可以让一个组件包含其他组件？@aviapp.：如果你想让一个组件成为另一个组件的子组件。我认为使用指令的方式是我知道的唯一方式。这在angular的最新版本中不起作用-不推荐在组件中添加@directive。
/// <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';
    }
}

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

import { DisplayComponent } from 'displ';