angular父子组件间怎么进行通信？本篇文章给大家介绍一下angular父子组件传值方式。
通过Input和Ouput传值
父组件：html和ts
登录后复制
public name: string = "jack";public changeName(value: string) { this.name = value;}
登录后复制
子组件：html和ts
{{name}}
登录后复制
import { Component, Input, EventEmitter, Output } from '@angular/core';@Input() name: string;@Output() changeName: EventEmitter = new EventEmitter();public emit() { this.changeName.emit("修改name属性");}
登录后复制
【相关教程推荐：《angular教程》】
通过setter监听属性的变化
父组件同上，子组件：
private _name: string = "";@Input() public get name(): string { return this._name;}public set name(value: string) { this._name = value + "定义结构";}
登录后复制
通过ngOnChanges钩子函数监听输入属性的变化
ngOnChanges在监听多个属性的时候，要比setter的方式简便一些。
@Input() name: string;ngOnChanges(changes: SimpleChanges): void { (({name}) => { console.log(name.currentValue,name.previousValue); })(changes);}
登录后复制
父组件html中通过模板变量调用子组件的方法和属性。
模板变量获取了子组件的一个引用。父组件：
登录后复制
子组件：
public childFn() { console.log("通过模板变量调用子组件中的方法");}
登录后复制
父组件通过ViewChild获取子组件实例
登录后复制
@ViewChild("child") child: LiftcycleComponent;public childFn(): void { this.child.childFn();}
登录后复制
通过service进行通信
service：
import { Subject } from 'rxjs';import { Injectable } from '@angular/core';@Injectable({ providedIn: 'root'})export class CommunService { constructor() {} public commun = new Subject(); communSend() { this.commun.next("send"); }}
登录后复制
父组件：
constructor(private commun: CommunService) { }public send(): void { this.commun.communSend();}
登录后复制
子组件：
constructor(private commun: CommunService) { this.commun.commun.subscribe((value) => {console.log(value)});}
登录后复制
父组件传递方法
父组件通过属性传递给子组件方法，子组件进行调用，一般不推荐，React采用这种通信方式。可能是基于this的绑定错综复杂，所以angular不太推荐。React Hooks的出现也有一部分原因是class类的this错综复杂。父组件：
登录后复制
public name: string = "jack";public send(): void { console.log(this.name);}
登录后复制
子组件：
登录后复制
@Input() send: Function;public childSend() { this.send();}
登录后复制
更多编程相关知识，请访问：编程视频！！
以上就是Angular父子组件间怎么进行通信？父子传值的方式浅析的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2709093.html
