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读取表单值或启动其他一些操作。

如何从transcluded content angular 4中分享数据

1 个答案: