Угловая маршрутизация - Есть ли какие-либо атрибуты, которые вы можете добавить в конфигурацию маршрутизации для подключения в компоненте?

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') {
        ...
      }
    });
  }
}