angular模块间通信,angular组件调用组件方法
本篇文章带大家继续有角的的学习，了解一下有角的中组件通信的方法，希望对大家有所帮助！
上一篇，我们讲了有角的结合NG-佐罗快速开发。前端开发，很大程度上是组件化开发，永远离不开组件之间的通信。那么，在有角的开发中，其组件之间的通信是怎么样的呢？【相关教程推荐： 《angular教程》 】
本文纯文字，比较枯燥。因为控制台打印的东西比较鸡肋，所以就不配图了，嗯~希望读者跟着说明代码走一遍更容易吸收~
1. 父组件通过属性传递值给子组件
相当于你自定义了一个属性，通过组件的引入，将值传递给子组件给你看代码。
！parent.component.html
app-child [parentProp]= 我的孩子“%”/app-child在父组件中调用子组件，这里命名一个parentProp的属性。
//child.component.ts
从" @角度/核心"导入{ Component，OnInit，Input }；
@组件({
选择器："应用程序-子代",
templateUrl:“”./child.component.html ，
样式URL:[ ./child.component.scss]
})
导出类子组件实现OnInit {
//输入装饰器
@Input()
parentProp！字符串；
构造函数(){ }
ngOnInit(): void {
}
}子组件接受父组件传入的变量parentProp，回填到页面。
！child.component.html
氕你好！{{ parentProp }}/h1
2. 子组件通过 Emitter 事件传递信息给父组件
通过新事件发射器()将子组件的数据传递给父组件。
//child.component.ts
从" @角度/核心"导入{ Component，OnInit，Output，事件发射器}。
@组件({
选择器："应用程序-子代",
templateUrl:“”./child.component.html ，
样式URL:[ ./child.component.scss]
})
导出类子组件实现OnInit {
//输出装饰器
@Output()
private childSayHi=新事件发射器()
构造函数(){ }
ngOnInit(): void {
this.childSayHi.emit(我的父母);
}
}通过发射通知父组件，父组件对事件进行监听。
//parent.component.ts
从" @角度/核心"导入{组件，在init }上。
@组件({
选择器："应用程序-交流",
templateUrl:“”./communicate.component.html ，
样式URL:[ ./communicate.component.scss]
})
导出类通信组件实现OnInit {
公共消息：string=
构造函数(){ }
ngOnInit(): void {
}
fromChild(数据：字符串){
//这里使用异步
setTimeout(()={
this.msg=数据
}, 50)
}
}在父组件中，我们对儿童组件来的数据进行监听后，这里采用了定时器的异步操作。是因为我们在子组件中初始化后就进行了发射，这里的异步操作是防止竞态条件竞争出错。
我们还得在组件中添加来自儿童这个方法，如下：
！parent.component.html
氕你好！{{ msg }}/h1
app-child(childSayHi)= from child($ event)/app-child
3. 通过引用，父组件获取子组件的属性和方法
我们通过操纵引用的方式，获取子组件对象，然后对其属性和方法进行访问。
我们先设置子组件的演示内容：
//child.component.ts
从" @角度/核心"导入{组件，在init }上。
@组件({
选择器："应用程序-子代",
templateUrl:“”./child.component.html ，
样式URL:[ ./child.component.scss]
})
导出类子组件实现OnInit {
//子组件的属性
public child msg:string= Prop:message from child
构造函数(){ }
ngOnInit(): void {
}
//子组件方法
public childSayHi(): void {
控制台。日志(方法：我是你的孩子。)
}
}我们在父组件上设置子组件的引用标识#子组件：
！parent.component.html
应用程序-子#子组件/应用程序-子之后在爪哇岛描述语言文件上调用：
从" @角度/核心"导入{ Component，OnInit，view child }。
从""导入{ ChildComponent } ./组件/子组件/子组件。组件；
@组件({
选择器："应用程序-交流",
templateUrl:“”./communicate.component.html ，
样式URL:[ ./communicate.component.scss]
})
导出类通信组件实现OnInit {
@ViewChild(childComponent )
childComponent！子组件
构造函数(){ }
ngOnInit(): void {
this.getChildPropAndMethod()
}
getchildproandmethod():void {
setTimeout(()={
控制台。日志(这个。子组件。子消息)；//道具：来自子级的消息
这个。子组件。childsayhi()；//方法：我是你的孩子。
}, 50)
}
}这种方法有个限制？就是子属性的修饰符需要是公共的，当是保护或者私人的的时候，会报错。你可以将子组件的修饰符更改下尝试。报错的原因如下：
类型使用范围公众的允许在累的内外被调用，作用范围最广保护允许在类内以及继承的子类中使用，作用范围适中私人的允许在类内部中使用，作用范围最窄
4. 通过 service 去变动
我们结合rxjs来演示。
rxjs是使用看得见的的响应式编程的库，它使编写异步或基于回调的代码更容易。
我们先来创建一个名为父母和孩子的服务。
//亲子。服务。分时（同timesharing）
从" @角度/核心"导入{内射}；
从" rxjs "导入{行为主体，可观察}；//行为主体有实时的作用，获取最新值
@可注射({
提供了："根"
})
导出类ParentAndChildService {
私有subject $:行为主体any=新行为主体(空)
构造函数(){ }
//将其变成可观察
getMessage(): Observableany {
返回这个. subject美元.asObservable()
}
setMessage(msg: string) {
这个. subject美元.下一个(味精)；
}
}接着，我们在父子组件中引用，它们的信息是共享的。
//parent.component.ts
从" @角度/核心"导入{ Component，OnDestroy，on init }。
//引入服务
从“src/app/services/亲子。服务"导入{ ParentAndChildService }；
从" rxjs "导入{主题}
从" rxjs/运算符"导入{ takeUntil }
@组件({
选择器："应用程序-交流",
templateUrl:“”./communicate.component.html ，
样式URL:[ ./communicate.component.scss]
})
导出类通信组件实现OnInit，OnDestroy {
unsubscribe $:Subject boolean=new Subject()；
构造器（
私人的只读parentAndChildService:parentAndChildService
) { }
ngOnInit(): void {
这个。parentandchildservice。getmessage()。管道（
takeUntil(this.unsubscribe$)
)。订阅({
下一步：(消息：任何)={
控制台。log( Parent: msg )；
//刚进来打印父：空
//一秒后打印家长：吉米
}
});
setTimeout(()={
这个。parentandchildservice。设置消息(“Jimmy”)；
}, 1000)
}
ngOnDestroy() {
//取消订阅
this.unsubscribe美元。下一个（真);
this.unsubscribe美元。完成();
}
}从" @角度/核心"导入{组件，在init }上。
从“src/app/services/亲子。服务"导入{ ParentAndChildService }；
@组件({
选择器："应用程序-子代",
templateUrl:“”./child.component.html ，
样式URL:[ ./child.component.scss]
})
导出类子组件实现OnInit {
构造器（
private parentAndChildService:parentAndChildService
) { }
//为了更好理解，这里我移除了父组件的科目
ngOnInit(): void {
这个。parentandchildservice。getmessage()。订阅({
下一步：(消息：任何)={
控制台。log( Child: msg )；
//刚进来打印子代：空
//一秒后打印孩子：吉米
}
})
}
}在父组件中，我们一秒钟之后更改值。所以在父子组件中，一进来就会打印味精的初始值空，然后过了一秒钟之后，就会打印更改的值吉米。同理，如果你在子组件中对服务的信息，在子组件打印相关的值的同时，在父组件也会打印。
【完】
更多编程相关知识，请访问：编程入门！以上就是聊聊有角的中组件之间怎么通信的详细内容，更多请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。