angular6父子组件之间的引入报错

报错: ERROR in : Type RecommendComponent in E:/2018/KYLIN-WEB/src/app/home/article-details/recommend/recommend.component.ts is part of the declarations of 2 modules: ArticleDetailsModule in E:/2018/KYLIN-WEB/src/app/home/article-details/article-details.module.ts and RecommendModule in E:/2018/KYLIN-WEB/src/app/home/article-details/recommend/recommend.module.ts! Please consider moving RecommendComponent in E:/2018/KYLIN-WEB/src/app/home/article-details/recommend/recommend.component.ts to a higher module that imports ArticleDetailsModule in E:/2018/KYLIN-WEB/src/app/home/article-details/article-details.module.ts and RecommendModule in E:/2018/KYLIN-WEB/src/app/home/article-details/recommend/recommend.module.ts. You can also create a new NgModule that exports and includes RecommendComponent in E:/2018/KYLIN-WEB/src/app/home/article-details/recommend/recommend.component.ts then import that NgModule in ArticleDetailsModule in E:/2018/KYLIN-WEB/src/app/home/article-details/article-details.module.ts and RecommendModule in E:/2018/KYLIN-WEB/src/app/home/article-details/recommend/recommend.module.ts.

这里写图片描述

article-details模块有四个子模块
刚开始的引用

article-details模块:
这里写图片描述

四个模块引入各自的component,用其中一个子模块recommend.module为例
这里写图片描述

于是打包时报错
这里写图片描述
翻译了一下
这里写图片描述
就是组件只能声明在一个模块里面

改进
把所有的组件声明在article-details模块里面,子模块不用再引入,每个子模块只需要引入article-details模块就可以了
这里写图片描述
这里写图片描述
这里是以其中一个子模块为例,其他三个也相同的操作
这样就可以通过编译了!

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Angular 中,有几种方法可以实现组件之间的数据传递: 1.使用 @Input() 装饰器:通过在组件中声明一个属性,并使用 @Input() 装饰器将其传递给组件组件可以使用这个属性进行渲染或其他操作。 例如,在组件中定义一个名为 "parentData" 的属性,并将其传递给组件: ``` <app-child [childData]="parentData"></app-child> ``` 然后,在组件中使用 @Input() 装饰器接收这个属性: ``` @Input() childData: any; ``` 2.使用 @Output() 装饰器:通过在组件中定义一个 EventEmitter 属性,并使用 @Output() 装饰器将其传递给组件组件可以通过调用该属性的 emit() 方法来触发事件,组件可以监听这个事件并进行相应的操作。 例如,在组件中定义一个名为 "childEvent" 的 EventEmitter 属性: ``` @Output() childEvent: EventEmitter<any> = new EventEmitter(); ``` 然后,在组件中触发该事件: ``` this.childEvent.emit(data); ``` 最后,在组件中监听该事件并进行相应的操作: ``` <app-child (childEvent)="onChildEvent($event)"></app-child> ``` ``` onChildEvent(data) { // 进行相应的操作 } ``` 3.使用服务:通过在一个服务中定义公共的数据或方法,然后在需要访问这些数据或方法的组件中注入该服务,可以实现组件之间的数据共享。 例如,在一个名为 "dataService" 的服务中定义一个名为 "sharedData" 的公共属性: ``` @Injectable() export class DataService { sharedData: any; } ``` 然后,在需要访问该属性的组件中注入这个服务并使用它: ``` constructor(private dataService: DataService) {} ngOnInit() { this.sharedData = this.dataService.sharedData; } ``` 这些是 Angular 中实现组件之间数据传递的常用方法,开发者可以根据实际情况选择合适的方式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值