提示：文章阅读建立在有JavaScript框架使用基础

文章目录

• 一、angluar组件传值
• 二、angluar组件交互

一、angluar组件传值

类似Vue和React，angluar也存在父子组件传值：

父组件传值子组件
使用@Input() 装饰器实现父组件传值到子组件
父组件写法：
.html文件

<app-testson [meisi]="str">app-testson>

子组件写法：
.ts文件

// 父组件传值到子组件实现
@Input() meisi: string;

此时，子组件.html文件里面可以使用meisi这个变量

子组件传值到父组件
使用@Output结合EventEmitter在子组件实现自定义事件实现子组件传值到父组件
子组件写法：
.html文件

<button (click)="sendToFather()">点击传值到父组件button>

.ts文件

// 子组件传值到父组件实现: 自定义事件
@Output() eventEmit = new EventEmitter();
sendToFather() {// EventEmitterthis.eventEmit.emit("传入父组件值写在这");
}

父组件写法：
.html文件

<app-testson (eventEmit)="receiveFromSon($event)">app-testson>

.ts文件

// 本地数据
listRes: string = "我是原始值";
// 自定义事件
receiveFromSon($event: string) {this.listRes = $event;
}

二、angluar组件交互

angluar组件交互可以借助@ViewChild结合@Input实现

@ViewChild可以实现父组件直接访问子组件的属性和方法，实现父子组件的交互。
子组件写法：
.ts文件

// ViewChild使用测试函数
facSon(e: Event) {console.log('ViewChild使用测试函数', e);
}

父组件写法：
.ts文件

// ViewChild使用
// @ViewChild("ViewChildTest") child: any;
@ViewChild(TestsonComponent) child: any;
ViewChildTestFac($event: Event) {this.child.facSon($event);
}

注意：这里写法可以有两种

1：使用模板引用变量
父组件.html文件

<app-testson #ViewChildTest>app-testson>

父组件.ts文件

// ViewChild使用
@ViewChild("ViewChildTest") child: any;
ViewChildTestFac($event: Event) {this.child.facSon($event);
}

2：直接导入组件实例
父组件.html文件

<app-testson >app-testson>

父组件.ts文件

import { TestsonComponent } from "../testson/testson.component"
// ViewChild使用
@ViewChild(TestsonComponent ) child: any;
ViewChildTestFac($event: Event) {this.child.facSon($event);
}

作者：薇薇的憨宝

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！