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

Posted 2023-03-13

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

【英文标题】：How to pass value from a component to another component file which is inside a library without Parent-Child relation?

【发布时间】：2020-10-14 22:57:11

【问题描述】：

我有一个包含组件和 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 在按钮单击时使用发射器，但没有任何反应。 这是我尝试过的。

声明@Output

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

在 setDestinationNameCode() 中调用它

this.setDestCode.emit(code);

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

但是什么也没发生。

任何帮助将不胜感激。

【参考方案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

【讨论】：

感谢您的想法，但它太短而无法理解。我不明白该怎么做。能不能说的详细一点？

查看本教程fireship.io/lessons/…中的“不相关的组件：与服务共享数据”这一部分

我已经看过那篇文章，所有示例都是针对简单输入框的，而不是库的。如果您有明确的答案或指导，请回复，否则不建议分享链接