angular父子组件,angular兄弟组件调用方法
本文带你了解Angular中的组件通信，介绍父子组件之间的通信和没有直接关系的组件之间的通信的方法。
准备一下我们的环境：
1.创建标题组件：ng g c组件/标题。
应用程序按钮/应用程序按钮
应用标题/应用标题
app-button/app-buttonexport类HeaderComponent实现OnInit {
构造函数(){}
ngOnInit(): void {}
}2.创建标题组件：ng g c组件/标题
span { { title } }/span export class title component实现OnInit {
title:string= title ；
构造函数(){}
ngOnInit(): void {}
}3.创建一个按钮组件：ng g c组件/按钮
button { { BTN name } }/button export class button component实现OnInit {
public BTN name:string= button ；
构造函数(){}
ngOnInit(): void {}
}直接调用
适用于父子关系组件，注意点是直接调用使得父子组件的耦合性变高，要明确使用确实需要直接调用。
1.把我们的header组件挂载到app中，这样app和header之间就形成了父子组件关系。
2.使用#来命名我们的组件：app-header #header/app-header
3.现在我们的header组件仍然是空的。让我们展开它。否则，我们叫什么？
导出类HeaderComponent实现OnInit {
public name:string= header component ；
printName(): void {
console.log(组件名为，this . name)；
}
}4.组件扩展后，我们可以在父组件app中调用子组件头中的属性和函数。
应用标题#标题/应用标题
p
调用子组件属性：{{ header.name }}
button(click)= header . print name()调用子组件函数/按钮
/p5。第四步是在父组件的html模板中操作。有时候我们需要在父组件的ts类中操作子组件。接下来我们来演示一下。
6.我们需要使用一个新的decorator @ViewChild(组件)
导出类AppComponent {
title=角度-航向；
@ViewChild(HeaderComponent)
私人头球！HeaderComponent
//声明循环钩子：组件和子组件的视图更新后调用，执行一次。
ngafterviewit():void {
//调用子组件属性
console . log(this . header . name)；
//调用子组件函数
this . header . print name()；
}
}@Input和@Output
适用于父子关系组件
1.我们在标题组件中定义标题，以解耦标题组件中直接调用所导致的扩展复杂性。
2.将@ Input()decorator:@ Input()public title:string= title 添加到title组件的title属性中；
3.给header组件添加title属性并赋值：public title: string=我是新标题；
4.我们在header组件的html模板中这样使用title组件：app-title[title]= title /app-title
5.我们一起来看看现在的效果。虽然界面很丑，但是下次用组件的时候设置标题是不是更方便？
6.以上步骤实现了父组件的数据传递到子组件，那么我们来看看子组件的数据是如何传递到父组件的。让我们用@Output()装饰器实现下面的代码。
7.在title组件的ts类中添加titleChange属性：@ output()public title change=new event emitter()；
8.在标题组件ts类中定期分发数据
ngOnInit(): void {
//定期分发子组件的数据。
setInterval(()={
this . title change . emit(this . title)；
}, 1500);
}9.现在让我们修改header的父组件来接收发送的数据：
应用程序标题
[标题]=标题
(title change)= onChildTitleChange($ event)
/app-titleonchildtitlchange(值：any) {
console . log( onChildTitleChange:，value)；
}利用服务单利进行通信
适用于无直接关系组件
1.既然要通过服务进行通信，那就先创建一个服务：ng g s services/EventBus，我们声明一个Subject类型的属性来辅助通信。
@可注射({
提供了：“根”，
})
导出类EventBusService {
public event bus:Subject any=new Subject()；
构造函数(){}
}2.为了省事，我们不会重新创建组件，因为我们header中的按钮组件和标题组件符合没有直接关系的组件。
3.转换我们的按钮组件并添加一个click事件来触发triggerEventBus函数。
导出类ButtonComponent实现OnInit {
public BTN name:string= button ；
构造函数(公共eventBusService:eventBusService){ }
ngOnInit(): void {}
public triggerEventBus(): void {
This.eventbus.next(我是按钮组件)；
}
}4.模拟标题组件中的数据采集
导出类TitleComponent实现OnInit {
构造函数(公共eventBusService:eventBusService){ }
ngOnInit(): void {
this . eventbus service . eventbus . subscribe((value)={
console.log(值)；
});
}
}利用cookie、session或者localstorage进行通信
1.这个很简单。我们仍然使用标题组件和按钮组件进行演示。这一次，我们将数据保存在标题组件中，并在按钮组件中获取数据。让我们来演示一下localstorage，其他都是一样的。
2.将标题保存到title组件的ngOnInit()钩子中的local storage:window . local storage . setitem( title ，this . title)；
3.获取按钮组件中的数据：const title=window . local storage . getitem( title )；
结语：
本文介绍了Angular的组件通信，为我们拆分组件的合理通信提供了保障。到目前为止，我们通过引入标签来使用组件。
有关编程的更多信息，请访问：编程入门！角形组件就是这样交流的。父子组件通信的两种方法详情请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。