如何仅在响应成功时才使表单路由(角度4)

在Angular 4中，可以使用路由守卫来实现仅在响应成功时才使表单路由。路由守卫是Angular提供的一种机制，用于在导航到某个路由之前或之后执行一些操作。

要实现仅在响应成功时才使表单路由，可以使用Resolve守卫。Resolve守卫允许在路由激活之前预先获取必要的数据，并在数据准备好后才导航到目标路由。

以下是实现的步骤：

创建一个名为FormDataResolver的Resolve守卫类，实现Resolve接口。在resolve方法中，可以进行表单数据的获取和处理，并返回一个Observable对象，该对象会在数据准备好后发出。

import { Injectable } from '@angular/core';
import { Resolve } from '@angular/router';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class FormDataResolver implements Resolve<any> {
  resolve(): Observable<any> {
    // 在这里获取和处理表单数据
    // 返回一个Observable对象，当数据准备好后发出
  }
}

在路由配置中，将Resolve守卫应用于目标路由。假设目标路由的路径为/form，可以将Resolve守卫添加到路由配置的resolve属性中。

import { Routes } from '@angular/router';
import { FormDataResolver } from './form-data.resolver';
import { FormComponent } from './form.component';

const routes: Routes = [
  {
    path: 'form',
    component: FormComponent,
    resolve: {
      formData: FormDataResolver
    }
  }
];

在目标组件中，通过ActivatedRoute服务获取解析后的表单数据。可以在组件的构造函数中注入ActivatedRoute，并通过data属性访问解析后的数据。

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

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent {
  formData: any;

  constructor(private route: ActivatedRoute) {
    this.formData = this.route.snapshot.data.formData;
  }
}

通过以上步骤，当导航到/form路径时，Resolve守卫会先获取并处理表单数据，只有在数据准备好后才会导航到FormComponent组件。这样就实现了仅在响应成功时才使表单路由。

对于腾讯云相关产品和产品介绍链接地址，由于要求不能提及具体的云计算品牌商，无法给出具体的推荐链接。但可以参考腾讯云的官方文档和产品介绍页面，了解他们在云计算领域的相关产品和解决方案。