Angular 使用组件构建应用程序_Angular 2 培训手册

Angular 使用组件构建应用程序

随着应用程序的复杂性和规模的增长，我们希望进一步划分组件之间的责任。

Smart / Container 组件是特定于应用程序，更高级别的容器组件，可访问应用程序的域模型。
Dumb / Presentational 组件是负责UI呈现和/或经由组件API传递的特定实体的行为（即组件属性和事件）的组件。这些组件更符合即将到来的Web组件标准。

组件依赖于其他组件，指令和管道。例如，TodoListComponent依赖于TodoItemComponent 。要让组件知道这些依赖关系，我们将它们分组到一个模块中。

import {NgModule} from '@angular/core';
import {TodoListComponent} from './components/todo-list.component';
import {TodoItemComponent} from './components/todo-item.component';
import {TodoInputComponent} from './components/todo-input.component';
@NgModule({
  imports: [ ... ],
  declarations: [
    TodoListComponent,
    TodoItemComponent,
    TodoInputComponent
  ],
  bootstrap: [ ... ]
})
export class ToDoAppModule {
}

declarations属性期望作为模块的一部分的组件，指令和管道的数组。

有关NgModule的更多信息，请参阅模块部分。

下一节：属性指令是改变组件的外观或行为的一种方式。理想情况下，指令应该以组件不可知的方式工作，而不是绑定到实现细节。

例如，Angular 2内置的属性指令ngClass和ngStyle，可以在任何组件或元素上工作。