Angular 2 个自定义组件在根组件崩溃的应用程序中

Question

我有一个看起来很简单的问题，我在学习时一直试图解决这个问题Angular 2. 创建一个组件，然后将该组件放入根组件中。当我不添加其他组件时，页面会加载。当我导入我的自定义组件并将指令添加到根组件时，页面停留在加载状态并且不会离开那里，就像它崩溃一样。我似乎无法弄清楚。

我的自定义组件（my-c.component.ts）：

import {component} from 'angular2/core'; 

@component({
    selector: 'my-comp',
    template: `
        <h3>Second component</h3>
    `
    })

export class mycComponent {

}

现在这是我的 "root" 组件，其中插入了我的自定义组件。 (app.component.ts)

import {Component} from 'angular2/core';
import {mycComponent} from './my-c.component';


@Component({
    selector: 'my-app',
    template: `
        <h1>Angular 2 Boilerplate (o yea)</h1>
        <h2>Now comes the second component</h2>
        <my-comp></my-comp>
    `,
    directives: [mycComponent]

})

export class AppComponent {

}

为了简单起见，在我的 index.html 文件中没有所有 header 内容。这不包括 polyfill 的所有包含以及 system.config 到 "start" 应用程序，这些都在那里。

<my-app>Loading...</my-app>

当我取出自定义组件的导入并删除指令时，我得到这个：

这就是我将指令 [mycComponent] 添加到根组件时发生的情况。

这是我的照片 index.html 如果你想看的话。

这似乎应该是最容易理解和工作的事情之一，但由于某种原因我被困在这里。

对于您认为它可能无法正常工作的原因的任何帮助，我们将不胜感激:(

文件结构>

Answer 1

在你的第二个组件@Component装饰器中可以是小写"c"吗？

Angular 2 个自定义组件在根组件崩溃的应用程序中

Angular 2 custom component inside root component crashing app

angular2-directives

angular