Angular2组件未呈现

Posted

技术标签:

【中文标题】Angular2组件未呈现【英文标题】:Angular2 component not rendered 【发布时间】:2015-07-16 08:36:48 【问题描述】:

我有 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';
    

结果很简单:

你好爱丽丝

鲍勃去哪儿了?

谢谢!

更新

我意识到我试图以错误的方式做这件事。我的意图是将display 组件嵌套在my-app 组件内,但my-app 的模板没有包含必要的成分:

    它不包含&lt;display&gt;&lt;/display&gt; 元素。而是将其包含在*** index.html 中,这是错误的位置。 视图注释没有包含显示组件作为指令引用。

简而言之,我应该拥有的是:

app.ts(查看注释)

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

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

import  DisplayComponent  from 'displ';

【问题讨论】:

bootstrap(DisplayComponent); ? @nada 是否有必要引导每个组件? 通常我们只需要引导根组件,我们将其他组件作为指令包含在其中。这是我们只需要引导根。如果您分别引导这两个组件,它们将是两个独立的 Angular 2 应用程序 【参考方案1】:

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

来自quickstart:

bootstrap() 函数将组件作为参数,启用 要渲染的组件(以及它包含的任何子组件)

所以是的,您确实需要为所有组件调用 bootstrap,除非它们是另一个组件的子组件。

【讨论】:

好的,因为我对这个很陌生,我刚刚意识到我必须将我的第二个组件作为指令包含在第一个...... 除了使用指令之外,一个组件是否可以包含其他组件? @AviadP.: 如果你想让一个组件成为另一个组件的子组件。我认为您使用指令的方式是我知道的唯一方式。 这在最新版本的 Angular 中不起作用 - 不推荐向组件添加 @directive。

以上是关于Angular2组件未呈现的主要内容,如果未能解决你的问题,请参考以下文章

在循环中呈现 2 个 tr 元素的 Angular2 组件

在Angular2中更改组件变量后视图未更新

我可以只在使用 Angular2 Universal 的客户端中运行组件方法吗?

Angular2,TypeScript,如何读取/绑定属性值到组件类(在 ngOnInit 中未定义)[重复]

具有多个子组件实例的Angular2父组件

angular2你如何在`ngFor`中渲染一个计时器组件