Angular 6通信子级-具有ng内容的父级

我在使用ng内容将参数从父对象传递给子对象时遇到了一点问题

我有一个模态分量

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
})
export class ModalComponent {
  @ViewChild('childModal') public childModal: ModalDirective;

  constructor() {}

  show() { 
    this.childModal.show();
  }

  hide() {
    this.childModal.hide();
  }
}


// html
<div bsModal #childModal="bs-modal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-info">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">Modal</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
       <ng-content select=".modal-body"> </ng-content>
      </div>

      <div class="modal-footer">
        <div class="pull-left">
          <button class="btn btn-default" (click)="hide()"> Cancel </button>
        </div>
      </div>
    </div>
  </div>
</div>

@组件({
选择器：“应用程序模式”，
templateUrl:'./modal.component.html'，
})
导出类ModalComponent{
@ViewChild（'childModal'）公共childModal:ModalDirective；
构造函数（）{}
show（）{
this.childModal.show（）；
}
隐藏（）{
this.childModal.hide（）；
}
}
//html
情态动词
&时代；
取消

在html的主要组件中：

<div *ngFor="let item of items">
  //some data
  <button (click)="myModal.show();">Show Modal</button>
</div>

<app-modal #myModal>
  <div class="modal-body"></div>
</app-modal>

//一些数据
显示模态

而且效果很好。当我需要模态中的数据时，我只需将其传递给show方法：

<button (click)="myModal.show(item);">Show Modal</button>

显示模式

但我需要在模式中包含另一个组件：

<app-modal #myModal>
  <div class="modal-body"><another-app-component></another-app-component></div>
</app-modal>

我不知道如何将“项目”数据传递给另一个应用程序组件

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
})
export class ModalComponent {
  @ViewChild('childModal') public childModal: ModalDirective;

  constructor() {}

  show() { 
    this.childModal.show();
  }

  hide() {
    this.childModal.hide();
  }
}


// html
<div bsModal #childModal="bs-modal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-info">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">Modal</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
       <ng-content select=".modal-body"> </ng-content>
      </div>

      <div class="modal-footer">
        <div class="pull-left">
          <button class="btn btn-default" (click)="hide()"> Cancel </button>
        </div>
      </div>
    </div>
  </div>
</div>

---

例如，ngFor生成5个项目，每个项目都有自己的数据。当我单击第一个“显示模式”时，我需要将第一个项目的数据发送到另一个应用程序组件

在子组件中使用

@Input

，但另一个应用程序组件（包括）不在ngFor中，因此我无法从ngFor访问指定项目，因为我不明白。。。。ngFor是否已过期？我对每个项目都有一个模式。当我初始化模式时，我超出了ngFor的范围，所以我无法访问items变量（带有数据），我不明白，只需执行此操作

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
})
export class ModalComponent {
  @ViewChild('childModal') public childModal: ModalDirective;

  constructor() {}

  show() { 
    this.childModal.show();
  }

  hide() {
    this.childModal.hide();
  }
}


// html
<div bsModal #childModal="bs-modal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-info">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">Modal</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
       <ng-content select=".modal-body"> </ng-content>
      </div>

      <div class="modal-footer">
        <div class="pull-left">
          <button class="btn btn-default" (click)="hide()"> Cancel </button>
        </div>
      </div>
    </div>
  </div>
</div>