你可以使用Angular的路由解析器来等待上一页的数据加载完成,然后再填充当前页面的字段。下面是一个示例代码:
首先,在路由配置中添加一个解析器:
import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { DataService } from './data.service';
@Injectable()
export class DataResolver implements Resolve {
constructor(private dataService: DataService) {}
resolve(route: ActivatedRouteSnapshot): Observable {
const id = route.paramMap.get('id');
return this.dataService.getData(id);
}
}
然后,在组件中使用解析器中的数据填充字段:
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
data: any;
constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.data = this.route.snapshot.data['data'];
}
}
最后,在路由配置中将解析器与组件关联起来:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MyComponent } from './my-component.component';
import { DataResolver } from './data.resolver';
const routes: Routes = [
{
path: 'my-component/:id',
component: MyComponent,
resolve: {
data: DataResolver
}
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class MyRoutingModule { }
这样,当你导航到my-component/:id
路径时,解析器将等待数据加载完成后再渲染MyComponent组件,并将解析器返回的数据填充到data
字段中。你可以在组件的模板中使用data
字段来显示数据。