angular中的组件嵌套

最新推荐文章于 2021-07-01 17:50:23 发布

古兔bug

最新推荐文章于 2021-07-01 17:50:23 发布

阅读量1.4k

点赞数 1

文章标签： angularjs

本文链接：https://blog.youkuaiyun.com/weixin_41875025/article/details/107389413

版权

本文介绍了在Angular中如何进行组件嵌套和模块组织。首先创建了header-module、main-module和sliderbar-module三个模块，然后在header-module内部创建并嵌套了header-center、header-left和header-right三个组件。通过在各个模块的modules.ts文件中声明和导出组件，并在app.module.ts中引入相关模块，使得组件能在app.html中正确显示。main-module和slidebar-module的处理方式与header-module类似，最终通过添加样式完成页面布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 创建3个包：
header-module
main-module
sliderbar-module
在这里插入图片描述
2 在header-module创建三个组件
header-center
heder-left
header-right

3 z将三个组件嵌套入header-module包里面
1）：在header-module.modules.ts文件中引入三个组件，且在declarations中声明

注意：exports：[放置外部需要调用的component文件]
imports：[调用文件所需要的Module包]
declarations：[放置的是这个包里面所有嵌套的组件Component]
4 在header-module.component.html文件中引入组件
在这里插入图片描述
注意：引入组件的名称需要按照各个组件中的ts文件中的selector命名规范命名