如何从嵌入的内容角度 4 共享数据

Question

我有一个通用模式

<div class="modal-header">
  <h1 mat-dialog-title [innerHTML]="data.title"></h1>
</div>
<div mat-dialog-content>
 <ng-content></ng-content>
</div>
<mat-dialog-actions>
 <button></button>
</mat-dialog-actions>

我有模态的内容

<modal>
  <form #form="ngForm" (ngSubmit)="addNewPerson(person)">
    <mat-form-field>
       <input type="text" [(ngModel)]="person.firstName" name="firstName"
                       placeholder="First Name" matInput required>
    </mat-form-field>
  </form>
</modal>

如何在通用模式组件中发送此表单中的数据？非常感谢

在这种情况下，使用 @Output() 将数据从子模式发送到通用模式不起作用。也很高兴看到如何从通用模式在组件中向下发送数据，就像我们可以在简单的组件层次结构中使用 @Input() 一样。

Answer 1

您可以添加一个自定义指令来获取对NgForm 指令的引用

<form myFormDirective #form="ngForm" (ngSubmit)="addNewPerson(person)">

@Directive({
  selector: '[myFormDirective]',
})
export class MyFormDirective {
  constructor(form:NgForm, myService:MyService) {
    console.log(form.value);
    myService.theForm = form;
  }
}

然后您可以使用共享服务来传递NgForm 引用，并根据需要从theForm.value 读取表单值或启动一些其他操作。