Question

下面是我创建的示例路由配置。但是，在我的几个组件中，我想基于特定的路由在HTML中添加和删除类。是否可以添加我可以以某种方式挂接到组件中的任何其他“属性”（组件和canActivate所在的位置）？

例如“如果URL.name = this”

{
    path: 'folders/:folderId/projects/:projectId/s',
    component: ProjectDetailComponent,
    canActivate: [AuthGuardService],
    children: [
        {
            path: 'edit',
            component: ProjectEditComponent,
            canActivate: [AuthGuardService],
            customName: EditPanel, // Something like this possible?
        },
    ],        
},

很抱歉，如果含糊不清。

Answer 1

我不确定这是否是最好的方法，但是您可以像这样传递data属性：

{
    path: 'folders/:folderId/projects/:projectId/s',
    component: ProjectDetailComponent,
    canActivate: [AuthGuardService],
    children: [
        {
            path: 'edit',
            component: ProjectEditComponent,
            canActivate: [AuthGuardService],
            data: { type: 'editPanel' }
        },
    ],        
},

然后您可以在组件中获取它：

export class ProjectEditComponent implements OnInit {
    constructor(private route: ActivatedRoute) {}

    ngOnInit() {
        if (this.route.snapshot.data.type === 'editPanel') {
            ...
        }
    }
}

Answer 2

我认为您想要的是您的路线上的查询参数。您可以通过将ActivatedRoute注入组件来检查组件中的查询参数。

您的路线将是localhost:4200/folders/1234/projects/1234/s?name=this

import { OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

export class SomeComponent implements OnInit {
  constructor (private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.queryParams.subscribe(params => {
      if (params.name === 'this') {
        ...
      }
    });
  }
}

角度路由-是否可以将任何属性添加到路由配置中以挂接到组件中？

2 个答案: