为多个动态创建的组件从 BehaviorSubject 中检索值

如何解决为多个动态创建的组件从 BehaviorSubject 中检索值

我正在创建一个动态预览，我在其中拖放并在预览画布中动态生成组件。该组件可以在同一预览画布中重复。删除组件设置时；例如，样式等也像工具箱一样生成。我已经成功地动态创建了元素，并且文本组件中的文本值可以单独更改。但是，当应用组件设置中的样式时，样式会在画布中的所有文本组件上更改，而不是单独更改。我正在使用 BehaviorSubject 将设置传递给服务中的文本组件。

html 动态创建的组件

<editable editableOnEnter (update)="updateText()">
    <ng-template viewmode>
        <div [style.font-style]="selectedStyle">
            {{ textLabel.value }}
        </div>
    </ng-template>
    <ng-template editMode>
        <input type="text" [formControl]="textLabel">
    </ng-template>
</editable>

服务

  private textStyle  = new BehaviorSubject('styleText');
  currentStyle$ = this.textStyle.asObservable();

  constructor() { }

  changeStyle(currentTextStyle: string) {
    this.textStyle.next(currentTextStyle);
  }

html 动态创建的样式组件

<div class="type-style">
   <button type="button" class="btn btn-widget" (click)="onClickItalic()" >
        <i class="fas fa-italic"></i>
   </button>
</div>

ts 动态创建的样式组件

  currentTextStyle: any;
  constructor(private data: DrawCanvasService) { }

  ngOnInit(): void {
    this.data.currentStyle$.subscribe(current => this.currentTextStyle = current);
  }

  onClickItalic() {
    this.data.changeStyle('italic');
  }

解决方法

您可以通过不同的方式来做到这一点： 1 如果您只想更改样式而不保留数据，您可以在组件的提供者中注入服务。 2 你的 BehaviorSubject 可以是一个像 {[key:string]: string} 这样的对象，其中的键应该是每个组件的一个 id，你只需更新 BehaviorSubject 上的那个属性