Angular: получить NgForm в проецируемом контенте

Question

Допустим, у меня есть такой компонент, как показано ниже:

<app-my-typical-form>
  <app-child-in-content></app-child-in-content>
</app-my-typical-form>

где my-typical-form.component.html является:

<form #f="ngForm">
  <ng-content></ng-content>
</form>
<hr>
<h3>Here is my form from the parent:</h3>
{{f|json}}

а также child-in-content.component.html а также child-in-content.component.ts следующие:

<h2>
  My Form from the projected content is:
</h2>
<br>
{{myForm|json}}

@Component({
  selector: 'app-child-in-content',
  templateUrl: './child-in-content.component.html',
})
export class ChildInContentComponent {
  constructor(@Optional() public myForm: NgForm) { }
}

Как вы можете видеть здесь, в StackBlitz,myForm в app-child-in-contentнулевой. Однако я понимаю, что посколькуchild-in-content является (родным) ребенком NgFormЯ могу получить его через DI. По-видимому, это не работает из-за проекции контента.

Итак, есть ли способ получить NgForm в app-child-in-contentкомпонент (EDIT: доViewInit)?

Answer 1

Вот ваша разветвленная ссылка на StackBlitz

Сначала вам понадобится ссылка на NgForm с использованием декоратора @ViewChild().

Ваш App.Component.ts...

@ViewChild(ChildInContentComponent, {static:true})
    private wizardComponent: ChildInContentComponent;
    @ViewChild(MyTypicalFormComponent, {static:true})
    private TypicalForm: MyTypicalFormComponent;

ngAfterViewInit(){
      this.wizardComponent.myForm = this.TypicalForm.wizardComponent      
}

Ваш типичный Form.component.ts добавляет это...

@ViewChild('f', {static:true}) wizardComponent;