同一 ng 组件的两个实例之间的通信

Question

在 Razor 视图中我有一个 angular 组件：

<my-widget id="myWidget" isfullscreen="false" class="some-class"></my-widget>

当用户单击按钮 'Popup' 时，在 iframe 中打开一个弹出窗口，我调用相同的组件但具有不同的属性值：

<my-widget id="myWidget" isfullscreen="true" class="some-class"></my-widget>

这意味着我有同一组件的 2 个不同实例。现在，在该组件中，我有一些输入、下拉菜单等，在弹出窗口中，我希望它们处于与打开弹出窗口之前相同的状态。这意味着如果用户更改下拉列表中的值，并且他单击 'Popup' 按钮，我不希望选择下拉列表的默认值。相反，我想要他在点击按钮之前选择的那个。

我设法用全局变量做到了这一点。在下拉列表的更改事件中，我将一个全局变量设置为正确的值。在组件的初始化事件中，我检查全局变量是否存在，如果存在我就使用它。我不喜欢这种方法。还有别的办法吗？

Answer 1

对于两个不相关的组件之间的通信，发送数据的唯一方法是使用服务。我们通常认为服务用于获取远程数据，但它们也用于在应用程序的组件之间共享数据。如果还没有的话，您将需要熟悉服务以及可观察对象和主题/行为主题。这是以这种方式使用服务的一种方式，来自 fireship.io.

data-sharing.service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class DataSharingService {

  private currentData$ = new BehaviorSubject(0); // change the value to the default value for the dropdown

  constructor() { }

  updateData(data: number) { // change this as well depending on data
    this.currentData$.next(data);
    return this.currentData$;
  }
}

component.ts

import { Component, OnInit } from '@angular/core';
import { DataSharingService } from "../data-sharing.service";

@Component({
  selector: 'app-component',
  template: 'app-component,
  styleUrls: ['./your.component.css']
})

export class ParentComponent implements OnInit {    
  dropDownValue: number; // change this depending on your dropdown value

  constructor(private dataSharingService: DataSharingService) { }

  ngOnInit() {
    this.dataSharingService.currentData$.subscribe(newData => this.dropDownValue = newData)
  }

  updateValue(event) {
    this.dataSharingService.updateData(event.target.value);
  }
}

component.html

<select id="[...]" name="[...]" [(ngModel)]="[...]" (change)="updateValue($event)">
  <option *ngFor="let [...]" [ngValue]="[...]">[...]</option>
</select>

我用了很多 [...] 因为我不知道你是如何渲染你的组件的，我什至不知道你是使用表单还是响应式表单。

同一 ng 组件的两个实例之间的通信

Communication between 2 instances of the same ng component

jquery

angular

angular10