跳到主要内容

组件交互

前文提醒

在 Angular 中，组件之间的交互（父传子和子传父）通常通过 Input 和 Output 装饰器来实现。以下是 Angular 中父传子和子传父的具体实现：

@Input​

父组件传递给子组件数据

//父组件 前端
<app-son [name]="'Hoo'"></app-hello>
//子组件 后端
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<p>{{ message }}</p>`
})
export class ChildComponent {
  @Input() name: string = ''; // 使用 @Input 接收父组件传递的数据
}

@Output​

父组件给子组件传递一个事件，子组件通过 @output 弹射触发事件

//父组件
<app-son (addList)="addListFunction($event)"></app-hello>
//父组件 后端
list:Array<string> = ['Angular']
addListFunction(str:string){
	this.list?.push(str)
}
//子组件 后端
import { Component, Output, EventEmitter } from '@angular/core';

@output() addList = new EventEmitter()
addBtnFun(){
	this.addList.emit('vue')
}

@ViewChild()​

获取元素的属性、调用子元素的方法等。@ViewChild() 的作用就是允许你在组件类中引用模板中的元素，并与之进行交互。

//父组件 前端
<app-son #mychild [name]="'Hoo'"></app-hello>
<button (click)="addFun()">获取子组件的方法</button>
//父组件 后端
import { Component, ViewChild } from '@angular/core';

@VIewChild('mychild') child: any;
list:Array<string> = ['Angular']
addFun(){
	this.child.addBtnFun()
}
//子组件 后端
import { Component, Output, EventEmitter } from '@angular/core';

@output() addList = new EventEmitter()
addBtnFun(){
	this.addList.emit('vue')
}

总结​

  • 父传子：使用 @Input 装饰器，将父组件的数据传递给子组件。
  • 子传父：使用 @Output 装饰器和 EventEmitter，子组件触发事件，父组件监听并处理传递的数据。
0%