Angular 2：从其他组件触发插值无效问题求助

你当前通过构造函数直接注入PropertiesComponent的方式存在本质问题：Angular的依赖注入系统在这里返回的并不是页面上正在渲染的那个C2实例，而是新创建的一个独立实例（或者说和DOM渲染的实例完全无关），所以你修改它的elementType变量，自然不会触发页面上C2组件的插值更新。

根据你的组件关系（父子/非父子），推荐以下几种正确的组件通信方式：

方案1：如果C1是C2的父组件（C2在C1模板中）—— 使用@ViewChild获取真实实例 #

这种方式适合直接获取页面上正在渲染的C2实例：

1. 首先在C1的模板中给C2组件添加模板引用变量：

<app-properties #propCompRef></app-properties>

2. 在C1组件类中通过@ViewChild获取该实例：

import { ViewChild } from '@angular/core';
import { PropertiesComponent } from "../properties/properties.component";

export class C1Component {
  // 通过模板引用变量获取真实渲染的C2实例
  @ViewChild('propCompRef') propComp!: PropertiesComponent;

  setActive(model) {
    console.log("test");
    // 此时修改的是页面上真实的C2实例变量，会触发插值更新
    this.propComp.elementType = "updated value";
  }
}

方案2：如果C1和C2是非父子关系（或跨层级）—— 使用共享服务通信 #

这种方式是Angular中跨组件通信的标准方案：

1. 创建一个全局共享服务：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class ElementTypeService {
  // 用BehaviorSubject存储值，初始值设为"test"
  private elementType$ = new BehaviorSubject<string>("test");
  // 对外暴露可观察对象，供组件订阅
  public currentElementType$ = this.elementType$.asObservable();

  // 提供更新值的方法
  updateElementType(newValue: string) {
    this.elementType$.next(newValue);
  }
}

2. 在C2组件中订阅服务的值并更新本地变量：

import { ElementTypeService } from '../element-type.service';
import { Subscription } from 'rxjs';

export class PropertiesComponent {
  elementType: string = "test";
  private sub!: Subscription;

  constructor(private elementTypeService: ElementTypeService) {}

  ngOnInit() {
    // 订阅服务的值变化，自动更新本地变量
    this.sub = this.elementTypeService.currentElementType$.subscribe(value => {
      this.elementType = value;
    });
  }

  ngOnDestroy() {
    // 组件销毁时取消订阅，避免内存泄漏
    this.sub.unsubscribe();
  }
}

3. 在C1组件中调用服务的方法更新值：

import { ElementTypeService } from '../element-type.service';

export class C1Component {
  constructor(private elementTypeService: ElementTypeService) {}

  setActive(model) {
    console.log("test");
    // 通过服务通知C2更新值
    this.elementTypeService.updateElementType("updated value");
  }
}

方案3：如果C1是C2的父组件—— 使用@Input()输入属性 #

这种方式更符合Angular的单向数据流理念：

1. 在C2组件中定义@Input()属性：

import { Input } from '@angular/core';

export class PropertiesComponent {
  // 接收父组件传入的值，初始值设为"test"
  @Input() elementType: string = "test";
}

2. 在C1的模板中绑定该输入属性：

<app-properties [elementType]="parentElementType"></app-properties>

3. 在C1组件类中维护这个变量：

export class C1Component {
  parentElementType: string = "test";

  setActive(model) {
    console.log("test");
    // 更新父组件变量，Angular会自动同步到子组件
    this.parentElementType = "updated value";
  }
}

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