Angular4 (RC5) 中的嵌套组件

Nesting components in Angular4 (RC5)

进入 Angular 并观看实际上是 Angular2 的过时教程(是的,我知道)。

Angular4:

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ AppComponent , MyChildComponent ],
  bootstrap: [ AppComponent ]
})

这似乎是您现在嵌套组件的方式,但是没有办法按照 Angular 2 中的方式(或类似方式)来实现吗?正如您可以在现在已弃用的 'directives' 属性 中直接在您的根组件中导入它(发现这对于快速开发非常方便)。

Angular2:

@Component({
   selector: 'app-root',
   directives: [MyChildComponent]
   template: '<div><ChildComponent></ChildComponent></div>'
})
export class AppComponent {}

编辑:这是 MyChildComponent 声明(仍然是 Angular2 的一部分):

@Component({
   selector: 'ChildComponent',
   template: '<h2>Child component</h2>'
})
export class MyChildComponent {}

注意:省略了进口申报

在某个时候(很久以前我忘记了每天弹出的不同版本)他们切换到基于模块的设计并且基本上在一夜之间取消了 directives

为了在任何地方使用您的组件,您只需要模块中的 declarations: [...] 部分填充该模块中的组件。

之后,您根本不需要组件中的 directives 部分。

简而言之:

  • 模块的 declarations 部分中列出的任何组件将使这些组件可供该模块的所有其他组件使用
  • 模块的 exports 部分中列出的任何组件将使这些组件可供 imports 该模块的任何其他模块使用。