Angular 6 Communication child - родитель с нг контентом - PullRequest
0 голосов
/ 04 июня 2018

У меня небольшая проблема с передачей аргументов от родителя к потомку с 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>

И в моем основном компоненте в 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>

И работает нормально.Когда мне нужны данные в модальном режиме, я просто передаю их, чтобы показать метод:

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

, но мне нужно включить другой компонент в мой модальный режим:

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

И я понятия не имею, какпередать данные 'item' этому другому компоненту приложения

Например, ngFor генерирует 5 элементов, каждый элемент будет иметь свои собственные данные.И когда я нажимаю на первый «Показать модальные», мне нужно отправить данные первого элемента в другой компонент приложения

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...