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

查看:32
本文介绍了Angular 1 到 Angular 5(导入嵌套组件)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

之前

  • Angular 1.5
  • ui-router

现在

  • Angular 5.0

如何像angular 1.5那样在组件父中导入子组件?我从 angular 5 开始教程 Heroes,但没有解释这个过渡,所有组件都导入到 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.

下一张图片尝试解释一下我如何在 angular 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 没有什么不同.这可以通过单个应用模块(对于复杂的应用程序来说还不够)或模块层次结构来完成.

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', {...});

在角度:

@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 模块允许有本地组件.如果在 declarationsexports 中指定了带有 bar 选择器的 BarComponent,它将在所有组件模板中可用.如果 BarComponent 仅在 declarations 中指定而不是在 exports 中指定,则它将仅在此模块的组件模板中可用.这样不同的模块可以有不同的,不会污染全局命名空间.

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 是路由组件,它应该在 declarationsexports 中指定,因为这样它就可以被路由模块使用.

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

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆