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

Question

Based on this answer: https://stackoverflow.com/a/43991457/7405706

Global Variable is automatically updated its value when using {{globals.role}}

but not when I defined role = this.globals.role; and display using {{role}}

The only way I found to make role variable update is creating a method to update it manually.

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

I want to know is there any way to implement this to make it update automatically. Thanks

StackBlitz (Also modified from this answer ) (I modified only component1.ts file)

Answer 1

Primitive data types are passed by value

A possible solution could be using getter like:

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

Forked Stackblitz

Answer 2

There is no way to trigger the update automatically. If you really want to use it, then you can have component1 inside component2 and pass the role as @Input , so that it can be updated automatically. Or just use the global alone instead of role.

Answer 3

I just use the service property instead of using the component role property 👇

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) {
  }

}