angular12父子组件通信的三种方法

在Angular中，父组件可以通过输入属性（@Input）来传递数据给子组件，但是不能直接修改子组件内部的变量，尤其是如果这些变量不是通过输入属性传递的。这是因为在Angular中，子组件的内部状态应该由子组件自己管理和控制，父组件应该通过输入属性来影响子组件的状态，而不是直接修改它的内部变量。

1.输入属性（@Input）和输出属性（@Output）组合：

父组件可以通过输入属性向子组件传递数据。
子组件可以通过输出属性触发事件，将变化通知给父组件

// 在父组件中
<app-child [inputData]="parentData" (outputEvent)="handleEvent($event)"></app-child>

// 在子组件中
@Input() inputData: any;
@Output() outputEvent: EventEmitter<any> = new EventEmitter<any>();

// 发送事件
this.outputEvent.emit(someData);

2.服务（Service）的使用：

父组件和子组件可以共享一个服务，通过服务来管理共享状态或者进行通信

// 在服务中定义共享数据或者通信方法
@Injectable({
  providedIn: 'root'
})
export class DataService {
  private sharedData = new BehaviorSubject<any>(null);
  sharedData$ = this.sharedData.asObservable();

  updateData(data: any) {
    this.sharedData.next(data);
  }
}

// 在父组件中
constructor(private dataService: DataService) {}

updateChildData() {
  this.dataService.updateData(newData);
}

// 在子组件中
constructor(private dataService: DataService) {
  this.dataService.sharedData$.subscribe(data => {
    // 处理接收到的数据
  });
}

3.ViewChild 和 ContentChild：

使用ViewChild或者ContentChild可以在父组件中获取子组件的引用，并通过这个引用访问子组件的属性和方法。但是这种方法需要谨慎使用，以避免破坏组件的封装性和可维护性

1. 获取对子组件的引用

import { Component, ViewChild } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
  selector: 'parent-component',
  template: `
    <child-component></child-component>
  `
})
export class ParentComponent {
  @ViewChild(ChildComponent) childComponent!: ChildComponent;

  ngAfterViewInit() {
    // 可以在这里访问子组件的属性和方法
    this.childComponent.childMethod();
  }
}

2. 获取对多个子组件或指令的引用

import { Component, ViewChildren, QueryList } from '@angular/core';
import { ItemComponent } from './item.component';

@Component({
  selector: 'parent-component',
  template: `
    <item-component></item-component>
    <item-component></item-component>
  `
})
export class ParentComponent {
  @ViewChildren(ItemComponent) itemComponents!: QueryList<ItemComponent>;

  ngAfterViewInit() {
    // 可以通过 QueryList 迭代访问每个子组件
    this.itemComponents.forEach(item => {
      console.log(item);
    });
  }
}


3. 获取对DOM元素的引用, 有时候需要直接访问HTML元素，可以通过设置 read 选项为 ElementRef：

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'parent-component',
  template: `
    <div #myDiv>Some content</div>
  `
})
export class ParentComponent {
  @ViewChild('myDiv', { static: true, read: ElementRef }) myDiv!: ElementRef;

  ngAfterViewInit() {
    // 可以通过 nativeElement 访问原生DOM元素
    console.log(this.myDiv.nativeElement);
  }
}

默认情况下，@ViewChild 在 ngAfterViewInit() 生命周期钩子之后才会设置子组件或DOM元素的引用。你可以通过 { static: true } 选项来设置在 ngOnInit() 之前就获取引用，但这样做可能会导致在某些情况下引用为 undefined，具体取决于引用的元素何时可用。

总结来说，Angular推荐的方式是通过输入属性和输出属性进行父子组件之间的通信，以及使用服务来管理共享状态。直接修改子组件内部的变量是不推荐的，因为这会破坏组件的封装性和复用性。

angular12父子组件通信的三种方法

猜你喜欢