同一页面中角度元素的多个实例 - 更改一个的属性会同时更改它

问题描述

我有一个局部视图：

<my-widget id="widget1" fullscreen="true"></my-widget>

这是另一个：

<my-widget id="widget2" fullscreen="false"></my-widget>

组件如下所示：

export class MyWidgetComponent implements OnInit  {

    _this: MyWidgetComponent = this;
    @input() fullscreen: string;

    get myModel(): MyModel {
        return this.myService.getModel();
    }

  ngOnInit() {
      this.myService.initialize(this.fullscreen);
  }

    constructor(
        private myService: MyService,) {
    
      }
}

然后在 my-widget.component.html 我有：

<dx-circular-gauge [value]="myModel.someValue">
             ...
</dx-circular-gauge>

当显示一次实例时，一切正常。一旦我显示了 angular 元素的第二个实例，并且用户在那里更改了一些内容，两个小部件的 myModel.someValue 都会更改，而不仅仅是一个。

“全屏”属性具有正确的值，对于一个小部件它是真的，而对于另一个它是假的。我做错了什么？

解决方法

我没有看到 fullscreen 属性的实际使用位置，所以我可能是错的，但是使用您提供的代码，看起来两个“my-widget”组件都将提供相同的 myService 实例，导致它们具有共享状态。