在Angular中,可以使用以下属性将组件挂钩到路由配置中:
data
属性:可以用来传递自定义数据到路由组件中。const routes: Routes = [
{ path: 'example', component: ExampleComponent, data: { foo: 'bar' } }
];
在组件中可以通过ActivatedRoute
服务来访问这些数据:
import { ActivatedRoute } from '@angular/router';
@Component({ ... })
export class ExampleComponent implements OnInit {
constructor(private route: ActivatedRoute) {}
ngOnInit(): void {
const foo = this.route.snapshot.data.foo; // 获取路由配置中的data属性值
console.log(foo); // 输出 'bar'
}
}
resolve
属性:可以用来在路由激活前解析数据。import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
import { Observable, of } from 'rxjs';
@Injectable({ providedIn: 'root' })
export class ExampleResolver implements Resolve {
resolve(route: ActivatedRouteSnapshot): Observable {
// 执行一些异步操作,返回Observable
// 可以使用route参数来获取路由信息
return of('resolved data');
}
}
const routes: Routes = [
{
path: 'example',
component: ExampleComponent,
resolve: { resolvedData: ExampleResolver }
}
];
在组件中可以通过ActivatedRoute
服务来访问解析后的数据:
import { ActivatedRoute } from '@angular/router';
@Component({ ... })
export class ExampleComponent implements OnInit {
resolvedData: any;
constructor(private route: ActivatedRoute) {}
ngOnInit(): void {
this.resolvedData = this.route.snapshot.data.resolvedData;
console.log(this.resolvedData); // 输出 'resolved data'
}
}
这些属性可以在路由配置中添加以实现在组件中挂钩的功能。
上一篇:Angular路由-嵌套的路由器出口(一个主要的+两个命名的出口)-导航到第三个路由器出口时出错
下一篇:Angular路由-在类型'ModuleWithProviders<RouterModule>'中缺少'Apply'。