使用Angular从祖父组件提交表单

Question

我在我的一个组件中构建了一个模板驱动的表单。此表单组件是具有提交按钮的组件的孙子。我需要从祖父提交表单并保持相同的用户输入验证（具有ngForm有效性）。我看过一些使用@ViewChild装饰器的文档，但我无法将它应用于一个大孩子。

我的文件夹结构如下所示：

为了简单起见，我将展示代码的主要部分：

表单放在右面板.component.html / right-panel.component.ts

中

@Component({
selector: 'vp-rightpanel',
templateUrl: 'right-panel.component.html',
styleUrls: ['right-panel.component.css'],
moduleId: module.id
})
export class RightPanelComponent implements OnChanges , OnInit{...

Parent组件是candidate-verification.component.html / candidate-verification.component.ts

<div class="col-md-6 right-panel-container">
    <vp-rightpanel *ngIf="showRightpanel" [rating]="starRating" (openAddEditWorkHistoryClicked)="onOpenAddEditWorkHistoryClicked($event)"></vp-rightpanel>       
</div>

祖父组件是app.component.ts / app.component.html，它使用路由注入容器（candidate-verification.component.ts），但这是具有提交按钮的ONE：

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">            
        <ul class="nav navbar-nav navbar-right">                               
            <li><button (click)="saveAndFinish()"type="button" class="btn btn-default btn-sm">Save and Finish</button></li>                 
        </ul>
 </div>

<router-outlet></router-outlet>  

导入和管理路线的模块如下所示：

const childRoutes: Routes = [
{ path: 'candidate-verification', component: CandidateVerificationComponent     
},
{ path: '', redirectTo: 'candidate-verification', pathMatch: 'full' }
];

@NgModule({
...
declarations: [  
    CandidateVerificationComponent,
    RightPanelComponent
]
 ...

这个应用程序的外观如下：

我希望这清楚地得到一些想法。感谢。