如何设置嵌套工艺路线

Question

我正在调用一个API，我得到了嵌套的页面。我似乎无法理解如何创建路由。

对于我理解的页面，您可以这样做：

   {
      path: ':id',
   }

当页面是嵌套的，而我不知道哪个页面将嵌套在哪个页面下时，如何路由这些页面？我所关心的就是页面被渲染。

   {
      path: 'id/:id',
   }

例如：

{ id: 1, url: 'food/pizas'}
{ id: 2, url: 'ux/size-shape'}
{ id: 3, url: 'book/house-of-card'}
{ id: 3, url: 'something/other-page'}

Answer 1

您应该这样创建您的路由：

{
      path: '/prefix/:category/:id',
      loadChildren: './page/page.module#PageModule',
      canActivate: [
            fromGuards.PrivatePagesGuard,
      ],
      resolve: {
         content: MyDynamicResolver
      }
   }

然后在您的解析器中，您将可以访问类别和id参数，因此您可以使用服务来获取资源。

@Injectable()
export class MyDynamicResolver implements Resolve<any> {
    constructor(private http: HttpClient) {}

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<PageCMS> {
        const category = route.paramMap.get('category');
        const id = route.paramMap.get('id');

        return <fetch your content from http or service here>;
    }
}

您将能够通过ActivatedRoute的数据在组件中访问它

constructor(private route: ActivatedRoute) {}

ngOnInit() {
    this.content = this.route.snapshot.data['content'];
}

"/prefix“可以是任何东西，其唯一目的是避免创建可以匹配任何url的过于通用的路由。