如何将值从一个组件传递到另一个没有父子关系的库中的组件文件？

Question

我有一个包含组件和 html 文件的库“用户表单”。

HTML 文件"user-form.component.html":

 <div class="relative-pos">
  <input type="text" class="form-control" [(ngModel)]="searchParam"
    (ngModelChange)="search()" />

  <div class="autocomplete-custom-dropdown" *ngIf="canDisplay()">
   
    <div class="table-head-fixed table-common">
      <div class="tbl-header">
        <table cellPadding="0" cellSpacing="0" Border="0">
          <thead>
            <tr>
              <th class="col-header" *ngFor="let mainHead of suggestedResponse?.headers">
                {{mainHead}}
              </th>
            </tr>
          </thead>
        </table>
      </div>
      <div class="common-scroll">
        <div class="tbl-content height-dropdown-main" malihu-scrollbar>
          <table cellPadding="0" cellSpacing="0" Border="0">
            <tbody>
              <tr *ngFor="let dt of suggestedResponse?.data" (click)="selectedVal(dt)">
                <td *ngFor = "let d of dt['code']">{{d}}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    
  </div>
</div>

此 HTML 文件作为公司表单（另一个 html）文件中库的一部分加载。

“company-form.component.html”

<user-form  [request]="getDestinationNumberRequest()" ></user-form>

第一个 html(user-form.component.html") 被加载为“company-form.component.html”的一部分，然后当我打开一个模式时（也在 company-form.component.html 中） ，单击按钮我必须在其后面已加载页面的输入框中设置值。 但问题出在 company-form.component.html 我有库标签而不是实际的输入标签，所以我不能使用 [(ngModel)] 实际的输入框在已经有 ngModel 的库的 html 中

<button (click) ="setDestinationNameCode()"></button>

我也尝试使用@Output 在按钮单击时使用发射器，但没有任何反应。 这是我尝试过的。

1. 声明@Output

@Output() setDestCode = new EventEmitter<String>();

1. 在 setDestinationNameCode() 中调用它

this.setDestCode.emit(code);

1. 将其设置为 <user-form [request]="getDestinationNumberRequest()" (setDestCode)="getData($event)" ></user-form>
2. 并在company-form.component.ts 中调用getData($event) 以使用数据并将其设置在searchParam 中，因为已经定义了ngModdel。

但是什么也没发生。

任何帮助将不胜感激。

Answer 1

您可以使用服务来实现这一点，并且可变数据应该是一个主题。 例如（这不是一个完整的代码，这是一个想法，因此您可以使用和处理它）-

export class SubjectService {

  private somedata = new Subject<any>();
  constructor() { }

  updateData() {
    this.somedata.next({ text: "Test Data" });
  }

  getData() {
    return this.somedata.asObservable();
  }
}

你可以像这样订阅你的组件

data: Subscription;

you need to unsubscribe it ngOnDestroy method