Angular 12中如何在子控制器中访问父组件属性

问题描述 #

我有一个基于Ionic 5（@ionic/angular 5.8.5）和Angular的应用，希望在子组件控制器中获取父组件里comingFromOldBoardVol属性的值。当前子组件尝试通过this.parent访问该属性失败，需要解决这个问题。

父组件代码（ComparePage） #

import { Component, OnInit } from '@angular/core';
import { ApiService } from 'src/app/services/api.service';
import { IBoard, IBoardData, ISorter } from 'src/app/model/profile';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-compare',
  templateUrl: './compare.page.html',
  styleUrls: ['./compare.page.scss'],
})
export class ComparePage implements OnInit {

  options: ISorter[] = [
    { code: ['timestamp', 'model'], title: 'recent_model', order: ['desc', 'asc'] },
    { code: ['gender'], title: 'gender', order: ['desc'] },
    { code: ['model'], title: 'model', order: ['desc'] },
    { code: ['win'], title: 'winning_board', order: ['desc'] }
  ];
  comingFromOldBoardVol: boolean;
  // 其他代码...
}

子组件代码（BoardsTabPage） #

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { IBoard, IBoardData } from 'src/app/model/profile';
import { ApiService } from 'src/app/services/api.service';
import { WeightLevelService } from 'src/app/services/weightLevel.service';

@Component({
  selector: 'app-boards-tab',
  templateUrl: './boards-tab.page.html',
  styleUrls: ['./boards-tab.page.scss'],
})
export class BoardsTabPage implements OnInit {

  constructor(public api: ApiService, private router: Router, private service: WeightLevelService) { }

  async ngOnInit() {
  }

  openBoard(c: IBoard) {
    if (!this.parent.comingFromOldBoardVol) {
      this.router.navigate(['/boards/asSurfedBy', { brand: c.brand, model: c.model }]);
    } else {
      this.service.pickBoardForVolume(null);
      this.router.navigate(['/volCompute', { id: c.id }]);
    }
  }
}

解决方案 #

方法一：使用@Input()输入属性（推荐，符合Angular组件通信规范） #

这是父子组件间传递数据的标准方式，低耦合、易维护。

1. 修改子组件代码：
   导入Input装饰器，定义与父组件属性同名的输入属性：

   import { Component, OnInit, Input } from '@angular/core'; // 新增Input导入
   // 其他导入保持不变
   
   @Component({
     selector: 'app-boards-tab',
     templateUrl: './boards-tab.page.html',
     styleUrls: ['./boards-tab.page.scss'],
   })
   export class BoardsTabPage implements OnInit {
     @Input() comingFromOldBoardVol: boolean; // 新增输入属性
   
     constructor(public api: ApiService, private router: Router, private service: WeightLevelService) { }
   
     async ngOnInit() {
     }
   
     openBoard(c: IBoard) {
       // 直接使用输入属性，替换this.parent.comingFromOldBoardVol
       if (!this.comingFromOldBoardVol) {
         this.router.navigate(['/boards/asSurfedBy', { brand: c.brand, model: c.model }]);
       } else {
         this.service.pickBoardForVolume(null);
         this.router.navigate(['/volCompute', { id: c.id }]);
       }
     }
   }
   

2. 修改父组件模板：
   在父组件的模板文件（compare.page.html）中，使用子组件时绑定该属性：

   <!-- 假设父组件中原本的子组件标签是<app-boards-tab>，修改为： -->
   <app-boards-tab [comingFromOldBoardVol]="comingFromOldBoardVol"></app-boards-tab>
   

方法二：注入父组件实例（不推荐，耦合度高） #

如果子组件仅在当前父组件中使用，可通过@Host()装饰器直接注入父组件实例，但会导致子组件与父组件强耦合，降低复用性。

1. 修改子组件代码：
   导入父组件类和Host装饰器，在构造函数中注入父组件：

   import { Component, OnInit, Host } from '@angular/core'; // 新增Host导入
   import { ComparePage } from '../compare/compare.page'; // 导入父组件类
   // 其他导入保持不变
   
   @Component({
     selector: 'app-boards-tab',
     templateUrl: './boards-tab.page.html',
     styleUrls: ['./boards-tab.page.scss'],
   })
   export class BoardsTabPage implements OnInit {
   
     // 新增@Host()注入父组件实例
     constructor(public api: ApiService, private router: Router, private service: WeightLevelService, @Host() private parent: ComparePage) { }
   
     async ngOnInit() {
     }
   
     openBoard(c: IBoard) {
       // 现在可以正常访问this.parent.comingFromOldBoardVol
       if (!this.parent.comingFromOldBoardVol) {
         this.router.navigate(['/boards/asSurfedBy', { brand: c.brand, model: c.model }]);
       } else {
         this.service.pickBoardForVolume(null);
         this.router.navigate(['/volCompute', { id: c.id }]);
       }
     }
   }
   

方法三：通过共享服务传递数据（适合复杂场景） #

如果需要跨多级组件传递数据，或数据需要在多个组件间共享，可创建一个共享服务，通过Observable传递数据：

1. 创建共享服务：

   import { Injectable } from '@angular/core';
   import { BehaviorSubject } from 'rxjs';
   
   @Injectable({
     providedIn: 'root'
   })
   export class AppStateService {
     private comingFromOldBoardVolSubject = new BehaviorSubject<boolean>(false);
     comingFromOldBoardVol$ = this.comingFromOldBoardVolSubject.asObservable();
   
     updateComingFromOldBoardVol(value: boolean) {
       this.comingFromOldBoardVolSubject.next(value);
     }
   }
   

2. 父组件中更新数据：

   import { AppStateService } from 'src/app/services/app-state.service';
   
   // ...省略其他代码
   constructor(private appStateService: AppStateService) { }
   
   // 在需要更新属性的地方调用：
   this.appStateService.updateComingFromOldBoardVol(true);
   

3. 子组件中订阅数据：

   import { AppStateService } from 'src/app/services/app-state.service';
   import { Subscription } from 'rxjs';
   
   // ...省略其他代码
   private subscription: Subscription;
   comingFromOldBoardVol: boolean;
   
   constructor(public api: ApiService, private router: Router, private service: WeightLevelService, private appStateService: AppStateService) { }
   
   ngOnInit() {
     this.subscription = this.appStateService.comingFromOldBoardVol$.subscribe(value => {
       this.comingFromOldBoardVol = value;
     });
   }
   
   ngOnDestroy() {
     // 组件销毁时取消订阅，避免内存泄漏
     this.subscription.unsubscribe();
   }
   
   openBoard(c: IBoard) {
     if (!this.comingFromOldBoardVol) {
       this.router.navigate(['/boards/asSurfedBy', { brand: c.brand, model: c.model }]);
     } else {
       this.service.pickBoardForVolume(null);
       this.router.navigate(['/volCompute', { id: c.id }]);
     }
   }
   

内容的提问来源于stack exchange，提问作者Louis