Angular表单提交后渲染不同组件的实现方法

嘿，这个需求在Angular里实现起来挺顺手的，我给你分享几种常用的方案，你可以根据自己的场景来选：

这是最适合简单切换场景的方法，通过布尔变量控制组件的显示与隐藏：

1. 在你的AppComponent类中添加两个布尔变量，用来控制组件的显示状态：

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  // 初始显示contact-form
  showContactForm = true;
  // 初始隐藏新组件（比如叫SuccessComponent）
  showSuccessComponent = false;

  onFormSubmit() {
    // 这里可以先处理表单提交的逻辑，比如发送请求、验证等
    console.log('表单已提交');
    
    // 切换组件显示状态
    this.showContactForm = false;
    this.showSuccessComponent = true;
  }
}

2. 修改AppComponent的模板，用*ngIf绑定变量来控制组件渲染：

<!-- app.component.html -->
<div>
  <component-one></component-one>
  <component-two></component-two>
  <!-- 绑定submit事件到我们定义的方法 -->
  <contact-form *ngIf="showContactForm" (submit)="onFormSubmit()"></contact-form>
  <!-- 表单提交后显示的新组件 -->
  <success-component *ngIf="showSuccessComponent"></success-component>
</div>

注意：要确保你的success-component已经在模块中声明（或者设置为独立组件），否则Angular识别不到它。

如果需要灵活切换多种组件，而不只是简单的两个，动态组件加载会更合适：

1. 在AppComponent模板中预留一个容器：

<!-- app.component.html -->
<div>
  <component-one></component-one>
  <component-two></component-two>
  <!-- 用来挂载动态组件的容器 -->
  <ng-template #componentContainer></ng-template>
</div>

2. 在AppComponent类中实现组件的动态加载与切换：

// app.component.ts
import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver, OnInit } from '@angular/core';
import { ContactFormComponent } from './contact-form/contact-form.component';
import { SuccessComponent } from './success/success.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  // 获取容器的引用
  @ViewChild('componentContainer', { read: ViewContainerRef }) container!: ViewContainerRef;

  constructor(private resolver: ComponentFactoryResolver) {}

  ngOnInit() {
    // 页面初始化时加载contact-form组件
    this.loadComponent(ContactFormComponent);
  }

  loadComponent(component: any) {
    // 先清空容器，避免多个组件叠加
    this.container.clear();
    // 创建组件工厂
    const factory = this.resolver.resolveComponentFactory(component);
    // 在容器中创建组件实例
    const componentRef = this.container.createComponent(factory);

    // 如果加载的是contact-form，监听它的submit事件
    if (component === ContactFormComponent) {
      componentRef.instance.submit.subscribe(() => {
        // 提交后切换到新组件
        this.loadComponent(SuccessComponent);
      });
    }
  }
}

注意：

• 你的ContactFormComponent需要定义一个submit输出属性（@Output() submit = new EventEmitter<void>();），用来触发切换事件。
• Angular 9+ 使用Ivy编译器后，动态组件无需再添加到entryComponents中，但如果是旧版本，需要在模块的entryComponents数组中声明这些动态组件。

如果这个组件切换属于页面级别的跳转（比如提交表单后进入结果页面），用路由会更符合Angular的路由设计：

1. 配置路由（app-routing.module.ts）：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ContactFormComponent } from './contact-form/contact-form.component';
import { SuccessComponent } from './success/success.component';

const routes: Routes = [
  // 默认路由显示contact-form
  { path: '', component: ContactFormComponent },
  // 提交后跳转到这个路由
  { path: 'success', component: SuccessComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. 修改AppComponent模板，用<router-outlet>承载路由组件：

<!-- app.component.html -->
<div>
  <component-one></component-one>
  <component-two></component-two>
  <!-- 路由组件会在这里渲染 -->
  <router-outlet></router-outlet>
</div>

3. 在ContactFormComponent中注入Router，提交后导航到新路由：

// contact-form.component.ts
import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'contact-form',
  templateUrl: './contact-form.component.html'
})
export class ContactFormComponent {
  constructor(private router: Router) {}

  onSubmit() {
    // 处理表单逻辑
    console.log('表单提交完成');
    // 导航到success路由
    this.router.navigate(['/success']);
  }
}

内容的提问来源于stack exchange，提问作者JDBennett