Question

基于这个答案：https://stackoverflow.com/a/43991457/7405706

全局变量在使用{{globals.role}}

时会自动更新其值

但不是在我定义role = this.globals.role;并使用{{role}}

显示时

我发现进行role变量更新的唯一方法是创建一种手动更新它的方法。

updateRole(){
    this.role = this.globals.role;
}

我想知道有没有办法实现它以使其自动更新。感谢

StackBlitz（也是根据此answer进行了修改）（我仅修改了component1.ts个文件）

Answer 1

原始数据类型按值传递

可能的解决方案可能是使用getter：

get role() {
  return this.globals.role;
}

<强> Forked Stackblitz

Answer 2

我只使用服务属性而不是使用组件角色属性

import {Component} from '@angular/core'

import {Globals} from './globals'

@Component({
  selector: 'component2',
  template: `
    <div>
      Component 2
      <br />
      <br />
      <input [(ngModel)]="globals.role" />
      {{varP}}
    </div>
  `
})
export class Component2 {

  constructor(public  globals: Globals) {
  }

}

Answer 3

无法自动触发更新。如果你真的想要使用它，那么你可以在component2中拥有component1并将角色作为@Input传递，以便它可以自动更新。或者只使用全局而不是角色。

Angular 2+ - 当值更改时，使全局变量自动更新

3 个答案: