向Angular 2添加单独的组件

Question

我必须在我的应用中添加一些组件（例如评论）： 我在尝试：

在comment.component.ts中：

import { Component } from '@angular/core';

@Component({
    selector: 'am-comments',
    template: `<h4>{{title}}</h4>`
})

export class CommentComponent {
    title = 'Comments title';
}

我的app.module.ts：

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';

import { AppComponent }  from './app.component';
import { CommentComponent } from './comment.component'; <--

@NgModule({
    imports: [
        BrowserModule,
        FormsModule
    ],
    declarations: [
        AppComponent,
        CommentComponent // <--
    ],
    bootstrap: [ AppComponent ]
})
export class AppModule { }

最后输出：

<am-comments>Waiting...</am-comments>

但它不会从CommentComponent outsite parent component

输出模板

我错过了什么？

Dir结构非常简单：

Answer 1

Angular2组件和指令不能直接在根组件之外使用。它们只能在另一个组件的模板中使用。

唯一的方法是将不同的模块作为额外的Angular2应用程序引导，其中每个引导模块都有一个为bootstrap: [ XxxComponent ]注册的不同组件。

指令和管道根本不能在根组件之外使用。

目前，每个引导模块的根组件需要具有不同的选择器。计划将来改变。