从 angular 中的 grand children 组件更新 grand parent 组件中的 boolean 属性

Question

我有一个 Grand Parent 组件，其中有一个按钮，基于一些代码，我想 show/hide 该按钮，因此我的代码如下：

grandparent.component.html

 <button
            mat-raised-button
            title="Send RFP to Suppliers"
            (click)="RequestForBid()"
            *ngIf="IsAllSuppliersGetRFP"           
 >

和grandparent.component.ts

 this.IsAllSuppliersGetRFP=!this.SetSendButton();

和 SetSendButton 方法如下：

     SetSendButton() {
    let all_supplier_request_recived=true;
    this.quoteDTO.lineitems.forEach(x=>{
      x.item_quantity.forEach(y=>{
         y.quote_lineitem_rfp.forEach(z=>{
           z.rfp_suppliers.forEach(a=>{
              if(!a.is_request_for_bid)
               {
                all_supplier_request_recived=a.is_request_for_bid;                
               }
           })
         })
      })
    });
    return all_supplier_request_recived;
  }

现在我有另一个 child，在 child 组件中我有另一个大 child 组件，该组件在 parent 框上弹出。在 pop-up 结束时，我想将 Grand Parent 字段 IsAllSuppliersGetRFP 设置为 true。

我不确定如何将属性从 grand parent 变为 grand child 并进行设置。我知道输入和输出，但因为这是 grand children 所以我不想在 Grand Parent -> Parent -> grand child 方式之间传递。

我也阅读了有关在多个组件之间传递值的服务，但我不确定如何在服务 [=44= 中获取 this.quoteDTO ] ?

Answer 1

I read about the services as well to pass the values between multiple components

是的，您可以通过以下方法做到这一点。

在共享服务中添加主题变量

public quoteSubject: Subject<any> = null;

public notifyWithType(type: string, message: any = null) {
   this.quoteSubject.next({ type: type, text: message });
}

关闭弹出窗口时在此处设置值..

this.sharedService.notifyWithType("all_suppliers_getRFP", 'boolean value' or 'DTO');

添加一个方法来绑定服务主体以在事件触发时接收值。

ngOnInit() {
  this.sharedService.quoteSubject.subscribe(result => {
      if (result.type === 'all_suppliers_getRFP') {
        this.setAllSuppliers(result.text);
      }
  });
}

setAllSuppliers(value: any) {
   // sent object (DTO or boolean)
   this.quoteDTO = value;
   this.IsAllSuppliersGetRFP = // 'value from DTO' as boolean;
}

您可能需要在此处更改一些内容，因为我无法准确理解您的要求。

快乐编码..:)

从 angular 中的 grand children 组件更新 grand parent 组件中的 boolean 属性

update boolean property in grand parent component from grand children component in angular

javascript

angular

angular6