Как получить доступ к методам в произвольном дочернем компоненте Angular, спроецированном с?

Question

Я создаю диалог с Angular Material, который будет родительским компонентом (содержащим заголовок и нижний колонтитул диалога), который затем может проецировать произвольный дочерний компонент (содержимое диалога), используя <ng-content>/ng-content>.

dialog.component.html:

<h1 mat-dialog-title>Title</h1>
<mat-dialog-content>
  <ng-content></ng-content>
</mat-dialog-content>
<mat-dialog-actions>
  <button mat-icon-button (click)="submit()">
    <mat-icon>save</mat-icon>
  </button>
</mat-dialog-actions>

произвольной диалог-content.component.html

<dialog>
  <!-- Dialog content here -->
</dialog>

То, что я хочу сделать, - это вызвать метод save () произвольного содержимого диалога ИЗ метода диалогового окна save (), поэтому мне нужно получить ссылку на произвольный компонент из родительского компонента. Я пытался использовать @ContentChild, но не могу заставить его работать, потому что я не знаю, какой компонент будет содержимым диалога до времени выполнения.

Answer 1

вы можете использовать генератор событий в вашем диалоговом компоненте для связи между компонентами.

добавьте это в ваш dialog.ts:

@Output() onSubmit = new EventEmitter();

submit() {
  // do whatever you want
  this.onSubmit.next();
}

тогда в вашем произвольном компоненте html:

<dialog (onSubmit)="save()">
  <!-- Dialog content here -->
</dialog>

где save () - функция сохранения ваших компонентов

общий сервис был бы более комплексным решением, но это работает для этого варианта использования.