Angular 1到Angular 5(导入嵌套组件) [英] Angular 1 to Angular 5 (import nested components)

问题描述

之前

• 角度1.5
• ui-router

现在

• Angular 5.0

如何在组件中导入子组件(如角1.5)? 我从角度5开始制作英雄教程，但没有解释这种过渡，所有组件都导入了app.modole.ts中.

How import subcomponents in a component father like a angular 1.5? I do the tutorial Heroes from angular 5, but not explaint this transition, all components are imported in app.modole.ts.

下一张图片试图解释一小我如何以角度1.5导入

The next image try to explain a litle how a I have imports in angular 1.5

有人知道如何在新的angular 5中将子组件导入到组件中? 还是绝对需要将所有组件导入app.module.ts?

Someone know how import subcomponents in a component in the new angular 5? or is absolute necesary import all components in app.module.ts?

推荐答案

与AngularJS毫无区别.这可以通过单个App模块(对于复杂的应用程序还不够)或模块的层次结构来完成.

It is no different to AngularJS in any way. This can be done with single App module (which isn't enough for complex applications), or a hierarchy of modules.

在AngularJS中:

In 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团队提出了功能模块的概念.功能模块应使用imports明确指定其对其他模块的依赖性.所有模块组件均在declarations和(可选)exports中指定.

Angular team proposes the concept of feature modules. Feature module should explicitly specify its dependency on other modules with imports. All module components are specified in declarations and (optionally) exports.

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

The difference from AngularJS is that Angular modules are allowed to have local components. If BarComponent with bar selector is specified in both declarations and exports, it will be available in all component templates. If BarComponent is specified only in declarations and not exports, it will be available only in component templates from this module. This way different modules can have different <bar> that won't pollute global namespace.

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

If BarComponent is route component, it should be specified in both declarations and exports, because this way it will be available to router module.

这篇关于Angular 1到Angular 5(导入嵌套组件)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！