相关疑难解决方法(0)

Angular @Input getter/setter和非原始值

问题:我想每次绑定子组件的对象中的属性发生变化时都能调用一个函数.但是,即使可以看到绑定的输入属性更新,setter也只被调用一次.

这一切都来自于需要将子组件绑定到其父组件属性,该属性恰好是具有深层嵌套属性的复杂对象.我已经了解到,当对象中的嵌套属性发生更改时,Angular onChange事件不会触发.因此决定使用getter/setter.然而,正如这个问题所见,使用getter/setter也无效.我已经改变了我的子组件以订阅父组件订阅的相同Observable,从而直接从服务接收更新并绕过父组件.我已经对Angulars绑定和TypeScript getter/setter进行了大量研究,并且从各方面来看,它看起来像我的代码显示工作,但事实并非如此.

目标:了解为什么使用带有getter/setter的@Input绑定到子组件中的父组件属性不能像非主要类型那样工作.是否存在我缺少的基本概念或我的代码中是否存在实现错误?

我将在这里展示一些源代码,并为任何希望看到它实时运行的人附加StackBlitz. StackBlitz现场演示

模拟data.service.ts

@Injectable()
export class MockDataService {
  public updateSubject: Subject<any> = new Subject();
  public numObj = {
    'prop1': 'stuff',
    'prop2': 'stuff',
    'prop3': 'stuff',
    'prop4': 'stuff',
    'level1': {
      'level2': {
        'target': 0 //target is the prop that will be getting updated
      }
    }
  }
  constructor() {
    this.startDemo();
  }
  private startDemo(): void {
    //This is simulating the server sending updates
    //to the numObj
    setInterval(() => {
      this.numObj.level1.level2.target += 1;
      this.update();
    }, 4000);
  }
  private …
Run Code Online (Sandbox Code Playgroud)

typescript angular-components angular

6
推荐指数
1
解决办法
2121
查看次数

标签 统计

angular ×1

angular-components ×1

typescript ×1