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屋!