要实现将表单数据输入加载到前一个组件中，您可以使用Angular的服务和路由。以下是一种可能的解决方案：

1. 创建一个数据服务，用于在组件之间共享数据。您可以使用Angular的@Injectable装饰器将其定义为一个可注入的服务。

// data.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private formData: any;

  constructor() { }

  setFormData(data: any) {
    this.formData = data;
  }

  getFormData() {
    return this.formData;
  }
}

2. 在第一个组件中，将表单数据加载到数据服务中。您可以使用数据服务的setFormData方法来实现。

// first.component.ts
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { DataService } from './data.service';

@Component({
  selector: 'app-first',
  template: `
    

      
      Submit
    
  `
})
export class FirstComponent {
  formData: any;

  constructor(private dataService: DataService, private router: Router) { }

  submitForm() {
    this.dataService.setFormData(this.formData);
    this.router.navigate(['/second']);
  }
}

3. 在第二个组件中，获取数据服务中的表单数据并显示在模板中。您可以使用数据服务的getFormData方法来实现。

// second.component.ts
import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-second',
  template: `
    
{{ formData }}
  `
})
export class SecondComponent {
  formData: any;

  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.formData = this.dataService.getFormData();
  }
}

4. 在路由配置中定义两个组件的路径。

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { FirstComponent } from './first.component';
import { SecondComponent } from './second.component';

const routes: Routes = [
  { path: 'first', component: FirstComponent },
  { path: 'second', component: SecondComponent }
];

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

现在，当用户在第一个组件中提交表单时，表单数据将加载到数据服务中。然后，用户将被导航到第二个组件，其中表单数据将从数据服务中获取并显示在模板中。