Angular2 - 嵌套组件的编译问题

Question

我有两个 Angular2 组件编码为 TypeScript:

app/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'; }

app/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 (nesting: 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

嗯，今天心情不错 ;)

您的应用中缺少两大块。顺便说一句，Plunker 预设了 Angular 2 个模板，您可以从中开始尝试。所以你缺少的是一个 NgModule 和 main.ts-file.

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

An Angular module is a class decorated with @NgModule metadata.

The metadata:

declare which components, directives and pipes belong to the module.

make some of those classes public so that other component templates can use them.

import other modules with the components, directives and pipes needed by the components in this module.

provide services at the application level that any application component can use.

既然你有一个子组件，你还需要添加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)

你的组件几乎是正确的。但是我们不再使用 "directives"，一切都在 NgModule 中处理。

这里有一个Plunker

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

Angular2 - 嵌套组件的编译问题

Angular2 - Compilation issue with nested component

typescript

tsc

angular