Question

我有两个用Angular2编码的TypeScript个组件：

应用程序/ app.component.ts

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

@Component({
    selector: 'my-app',
    styles : [`
        .parent {
            background : #c7c7c7;
            color : #000;
            padding: 20px;
        }
    `],
    template: `
        <div class="parent">
            <h1>{{name}}</h1>
        </div>
    `,
})
export class AppComponent { name = 'Angular'; }

应用程序/ child.components.ts

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

@Component({
    selector: 'child-component',
    styles : [`
        .child {
            background : #aaa;
            padding: 10px;
        }
    `],
    template: `
        <div class="child">
            <h2>{{name}}</h2>
        </div>
    `,
})
export class ChildComponent {
    name = "Child Component";
}

如果在组件app/app.component.ts中我没有嵌套组件：app/child.components.ts一切都正确编译。

请点击这里：

http://plnkr.co/edit/5PfPmDoUkxYRirCtwSGa?p=preview&open=app%2Fapp.component.ts

但如果我嵌套它，那么我认为转换器无法编译......

app / app.component.ts（嵌套：app / child.components.ts）

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

@Component({
    selector: 'my-app',
    styles : [`
        .parent {
            background : #c7c7c7;
            color : #000;
            padding: 20px;
        }
    `],
    template: `
        <div class="parent">
            <h1>{{name}}</h1>
            <child-component></child-component>
        </div>
    `,
    directives: [ChildComponent]
})
export class AppComponent { name = 'Angular'; }

请点击这里：

http://plnkr.co/edit/qpsYQx4Ih4qQ1dyk3tFH?p=preview&open=app%2Fapp.component.ts

我的问题是：

1-上述代码失败了什么？

2-有没有办法可以检查TypeScript转换器的错误日志，看看出现类似转换问题时会发生什么？

Answer 1

嗯，今天感觉很好;）

您在应用中缺少两件大件。 BTW，Plunker预设了Angular 2模板，您可以从中开始玩游戏。所以你缺少的是一个NgModule和main.ts文件。

您可以阅读有关NgModule here的更多信息，但请摘录该页面：

Angular模块是使用@NgModule元数据修饰的类。

元数据：


声明哪些组件，指令和管道属于该模块。

将其中一些类公开，以便其他组件模板   可以使用它们。

使用组件，指令导入其他模块   和模块中的组件所需的管道。

提供服务   在应用程序级别，任何应用程序组件都可以使用。

由于你有一个子组件，你还需要添加CUSTOM_ELEMENTS_SCHEMA，因为你有<child-component>标签，即元素。这将是适合你的NgModule，非常小：

@NgModule({
  imports: [
    BrowserModule,
  ],
  declarations: [
    AppComponent
    ChildComponent,
  ],
  bootstrap: [ AppComponent ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})

export class AppModule { }

其他缺少的文件是main.ts，它启动了应用程序。

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';

platformBrowserDynamic().bootstrapModule(AppModule)

您的组件几乎是正确的。但是我们没有使用＆＃34;指令＆＃34;在NgModule中，一切都得到了解决。

这里是Plunker

正如我所说，我真的建议你从教程的开头开始Angular.io我认为教程非常好！

Angular2 - 嵌套组件

1 个答案: