如何通过路由器访问孙子的元素？答案

【问题标题】：How to access grandchildren's' elements through router?如何通过路由器访问孙子的元素？
【发布时间】：2019-09-01 09:28:48
【问题描述】：

我已将我的问题上传到stackblitz。

我有一个网站，它有多种形式，可通过路由访问。我将提交逻辑集中在父组件中。单击即可提交所有表单。

有没有办法在不使用专用服务的情况下访问位于子路由上的form 元素（以检查其有效性）？

谢谢

【问题讨论】：

不，当您“路由”到另一个组件时，您会丢失该组件的数据。这是因为您需要将值存储在服务中（服务一直存在）。您可以重新考虑您的应用程序，使用带有子组件的父组件 - 但不在 <router-outlet> 中 - 具有所有属性的对象都属于主组件并作为输入传递给子组件 - 请记住，如果您作为输入传递一个对象，您可以使用不需要的事件发射器更改属性。但是你不路由，只显示一个或另一个孩子使用*ngIf
感谢@Eliseo，您将如何将整个表单注入服务？ NgModel 似乎不起作用
我添加了回复，希望对你有帮助

标签： angular

【解决方案1】：

假设你有一个简单的服务

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class DataService {
  data:any={}
  constructor() { }
}

一个组件可以是这样的，看到在[(ngModel)]我们使用data.nameOfPropertie

<form ngNativeValidate #f1="ngForm">
  <div>
    <label for="username">User Name: </label>
    <input [(ngModel)]="data.username" class="form-control" type="text" name="usrname" required>
  </div>
  <div>
    <label for="phonenum">Phone: </label>
    <input [(ngModel)]="data.phonenum" class="form-control" name="phonenum" type="tel" pattern="^\d{4}-\d{3}-\d{4}$" required>
  </div>
  </form>

你的 component.ts 喜欢

export class Form1Component  {
  get data()
  { 
    return this.dataService.data;
  }
  set data(value)
  {
     this.dataService.data=value
  }
  constructor(private dataService:DataService){}
}

每个注入DataService的组件，都可以访问this.dataService.data

查看您的forked stackblitz

注意1：如果您选择ReactiveForms，则技术类似，您共享数据，并将其更改为订阅myForm.valueChanges

注意2：对于最复杂的形式，我们可以使用主题并发出值，请参阅我在SO question的回复

【讨论】：

这就是我最终做的事情，但我没有将模型保存到data，而是存储了表单元素的副本（因为我想知道表单的状态。不仅仅是它的'输入）。谢谢