Angular父子组件间怎么进行通信？父子传值的方式浅析

通过Input和Ouput传值

父组件：htML和ts

app-liftcycle [name]="name" (changeName)="changeName($event)">
    /app-liftcycle>
    

public name: string = "jack";
public changeName(value: string) {
        this.name = value;
}
    

子组件：html和ts

div (click)="emIT()">
{
{
name}
}
    /div>
    

import {
 component, Input, EventEmitter, Output }
     From '@angular/core';
    @Input() name: string;
    @Output() changeName: EventEmitterstring>
     = new EventEmitterstring>
    ();
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中通过模板变量调用子组件的方法和属性。

模板变量获取了子组件的一个引用。父组件：

app-liftcycle #child>
    /app-liftcycle>
    button (click)="child.chilDFn()">
    按钮/button>
    

子组件：

public childFn() {
        console.log("通过模板变量调用子组件中的方法");
}
    

父组件通过ViewChild获取子组件实例

app-liftcycle [name]="name" (changeName)="changeName($event)" #child>
    /app-liftcycle>
    button (click)="childFn()">
    childFn/button>
    

@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 Subjectstring>
    ();
    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错综复杂。父组件：

app-liftcycle [send]="send.bind(this)">
    /app-liftcycle>
    

public name: string = "jack";
public send(): void {
        console.log(this.name);
}
    

子组件：

button (click)="childSend()">
    childSend/button>
    

@Input() send: Function;
public childSend() {
        this.send();
}
    

更多编程相关知识，请访问：编程视频！！

以上就是Angular父子组件间怎么进行通信？父子传值的方式浅析的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！