angularjs - Angular 1 到 Angular 5(导入嵌套组件)

Question

之前

• Angular 1.5
• 用户界面路由器

现在

• Angular 5.0

如何在像 angular 1.5 这样的组件父亲中导入子组件？我从 angular 5 开始学习英雄教程，但没有解释这个转换，所有组件都导入到 app.modole.ts 中。

下一张图片尝试解释一下我如何在 angular 1.5 中导入

有人知道如何在新的 Angular 5 的组件中导入子组件吗？还是绝对有必要导入 app.module.ts 中的所有组件？

Answer 1

它在任何方面都与 AngularJS 没有什么不同。这可以通过单个 App 模块(这对于复杂的应用程序来说不够)或模块层次结构来完成。

在 AngularJS 中:

angular.module('app', ['foo'])
.component('app', {...});

angular.module('foo', [])
.component('foo', {...})
.component('barUsedByFoo', {...});

在 Angular 中:

@NgModule({ declarations: [FooComponent, BarUsedByFooComponent], exports: [FooComponent] })
class FooModule {}

@NgModule({ imports: [FooModule], declarations: [AppComponent], bootstrap: [AppComponent] })
class AppModule {}

Angular团队提出了feature modules的概念.功能模块应使用 imports 明确指定其对其他模块的依赖性.所有模块组件都在 declarations 中指定和(可选)exports .

与 AngularJS 的不同之处在于 Angular 模块允许具有本地组件。如果BarComponent与 bar选择器在 declarations 中指定和 exports ，它将在所有组件模板中可用。如果BarComponent仅在 declarations 中指定而不是 exports ，它将仅在该模块的组件模板中可用。这样不同的模块可以有不同的<bar>不会污染全局命名空间。

如果BarComponent是路由组件，在declarations中都要指定和 exports ，因为这样它将对路由器模块可用。