Angular2从子路由获取FormGroup

Angular 2 从子路由获取 FormGroup

基础概念

在 Angular 中，子路由是指嵌套在父路由下的路由配置，而 FormGroup 是 Angular 表单模块中的一个核心类，用于管理表单控件的集合。

解决方案

要从子路由组件中获取 FormGroup，有几种常见的方法：

方法1：使用 ViewChild 获取子组件实例

// 父组件
import { Component, ViewChild } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
  selector: 'app-parent',
  template: `
    <router-outlet></router-outlet>
  `
})
export class ParentComponent {
  @ViewChild(ChildComponent) childComponent: ChildComponent;

  ngAfterViewInit() {
    if (this.childComponent) {
      const formGroup = this.childComponent.myForm;
      // 使用 formGroup
    }
  }
}

方法2：通过服务共享数据

// form.service.ts
import { Injectable } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Injectable({
  providedIn: 'root'
})
export class FormService {
  private formGroup: FormGroup;

  setForm(form: FormGroup) {
    this.formGroup = form;
  }

  getForm(): FormGroup {
    return this.formGroup;
  }
}

// 子组件
import { Component } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { FormService } from './form.service';

@Component({
  selector: 'app-child',
  template: `...`
})
export class ChildComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder, private formService: FormService) {
    this.myForm = this.fb.group({
      // 表单控件定义
    });
    this.formService.setForm(this.myForm);
  }
}

// 父组件
import { Component } from '@angular/core';
import { FormService } from './form.service';

@Component({
  selector: 'app-parent',
  template: `...`
})
export class ParentComponent {
  constructor(private formService: FormService) {
    const formGroup = this.formService.getForm();
    // 使用 formGroup
  }
}

方法3：使用路由数据传递

// 子路由配置
const routes: Routes = [
  {
    path: 'child',
    component: ChildComponent,
    data: { form: null } // 初始化为null
  }
];

// 子组件
import { Component } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-child',
  template: `...`
})
export class ChildComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder, private route: ActivatedRoute) {
    this.myForm = this.fb.group({
      // 表单控件定义
    });
    this.route.snapshot.data.form = this.myForm;
  }
}

// 父组件
import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-parent',
  template: `...`
})
export class ParentComponent {
  constructor(private route: ActivatedRoute) {
    const childRoute = this.route.children.find(r => r.outlet === 'primary');
    if (childRoute) {
      const formGroup = childRoute.snapshot.data.form;
      // 使用 formGroup
    }
  }
}