Javascript 通过ngx引导模式函数将数据传递给子组件

我在angular应用程序的父组件中有以下代码

父组件

<div>
    <button *ngIf="data.type == 'el'" (click)="readInfo('el')">click</button>
    <button *ngIf="data.type == 'ga'" (click)="readInfo('ga')">click</button>
</div>


readInfo(type) {
    if (type === 'el') {
      this.bsModalRef = this.modalService.show(ChildComponent, { class: 'modal-lg' }, el);
    } else if (type === 'ga') {
      this.bsModalRef = this.modalService.show(ChildComponent, { class: 'modal-lg' }, ga);
    }
  }

 <div class="container" *ngIf="el">
      <!-- el contents goes here -->
  </div>

  <div class="container" *ngIf="ga">
    <!-- ga contents goes here -->
</div>

点击
点击
readInfo（类型）{
如果（类型=='el'）{
this.bsModalRef=this.modalService.show（ChildComponent，{class:'modallg'}，el）；
}else如果（类型=='ga'）{
this.bsModalRef=this.modalService.show（ChildComponent，{class:'modal lg'}，ga）；
}
}

子组件

<div>
    <button *ngIf="data.type == 'el'" (click)="readInfo('el')">click</button>
    <button *ngIf="data.type == 'ga'" (click)="readInfo('ga')">click</button>
</div>


readInfo(type) {
    if (type === 'el') {
      this.bsModalRef = this.modalService.show(ChildComponent, { class: 'modal-lg' }, el);
    } else if (type === 'ga') {
      this.bsModalRef = this.modalService.show(ChildComponent, { class: 'modal-lg' }, ga);
    }
  }

 <div class="container" *ngIf="el">
      <!-- el contents goes here -->
  </div>

  <div class="container" *ngIf="ga">
    <!-- ga contents goes here -->
</div>

---

我想通过模态函数将一个值从父组件传递给子组件。我的目标是在我的ChildComponent中检索此值，并使用*ngIf

解决方案1

使用回调将数据传递回父组件，并通过组件属性将其传递给子组件

this.modalSvc.show(LoadGeneratorAddModalComponent, {
         initialState: {
            successCb: (data) => {
                // data come from the modal, assign it to your variable in parent component
                this.dataPassToChild = data;
            }
         }
      }
    ); 

解决方案2

您始终可以通过服务传递数据，创建主题，并在服务中公开可观察到的内容。

---

您可以观察子组件中的可观察内容，并触发模态组件中的事件。

解决方案1

this.modalSvc.show(LoadGeneratorAddModalComponent, {
         initialState: {
            successCb: (data) => {
                // data come from the modal, assign it to your variable in parent component
                this.dataPassToChild = data;
            }
         }
      }
    ); 

使用回调将数据传递回父组件，并通过组件属性将其传递给子组件

this.modalSvc.show(LoadGeneratorAddModalComponent, {
         initialState: {
            successCb: (data) => {
                // data come from the modal, assign it to your variable in parent component
                this.dataPassToChild = data;
            }
         }
      }
    ); 

解决方案2

您始终可以通过服务传递数据，创建主题，并在服务中公开可观察到的内容。

---

您可以观察子组件中的可观察对象，并触发模态组件中的事件。

使用@Input动态传递数据怎么样，您可以查看此链接以了解更多信息：使用@Input动态传递数据怎么样，您可以查看此链接以了解更多信息：

this.modalSvc.show(LoadGeneratorAddModalComponent, {
         initialState: {
            successCb: (data) => {
                // data come from the modal, assign it to your variable in parent component
                this.dataPassToChild = data;
            }
         }
      }
    );