Angular之路由

Posted by Shen Chaoran on December 14, 2017

路由插座

加载路由配置中的childrenloadChildren字段指向的路由或模块。对于 REST 风格的路由有时候回出现语义上的误解。比如solutionssolutions/:id,是符合 REST 风格的,但在前台 solutions 加载的组件中不用包含后者加载的组件。就是后者的组件不应放在前者的children中。

前端路由与后端路由

路由传值

注意: - 传过去的只能是string - queryParams传值有长度限制,因为url有长度限制

this.router.navigate([`${this._taskId}`], {
    relativeTo: this.route,
    queryParams: {
        cmpTask: JSON.stringify(this.cmpTask)
    }
});

// 取值
this.route.queryParams
    .subscribe((params: Params) => {
        console.log(params);
        this.cmpTask = JSON.parse(params['cmpTask']);
    });
{
    path: 'solutions/:id',
    component: SolutionComponent
}

// 取值
this.route.params
    .subscribe((params: Params) => {
        this.cmpTaskId = params['id'];
        this.fetchInterval();
    });

ActivatedRoute

是有层级关系的,就像 feature-routing.module 中的路由嵌套一样,ActivatedRoute 有一个 firstChild 属性,可以通过

while(route.firstChild) {
    route = route.firstChild;
}

拿到处于叶节点即url最长的路由

Reference