Как установить класс с маршрутизацией в угловых 6

Question

У меня есть главный компонент, который содержит роутер-розетку это мой главный компонент

    <div><router-outlet></router-outlet></div>

и это мой маршрут.модуль

      {
    path: 'insuranceKindSample',
    component: InsuranceKindIndexSampleComponent,
    data: { title: ' آزمایش ثبت اطلاعات نوع بیمه', icon: 'fa-bar-chart', showInMenu: true, position: 'parent' },
    children: [
      {
        path: 'master-dialog',
        component: InsuranceKindMasterDialogComponent,
        data: { title: 'Master-dialog', icon: 'fa-bar-chart', showInMenu: false },
        children: [
          {
            path: 'index',                             
            component: InsuranceKindIndexDialogComponent,
            data: { title: 'Index', icon: 'fa-bar-chart', showInMenu: false }
          },
          {
            path: 'add',
            component: InsuranceKindCreateSampleComponent,
            data: { title: 'Add', icon: 'fa-bar-chart', showInMenu: false }
          },
          {
            path: 'edit',
            component: InsuranceKindEditSampleComponent,
            data: { title: 'Edit', icon: 'fa-bar-chart', showInMenu: false }
          },
        ]
      },

    ]
  },

при запуске главного компонента отображается мой индексный компонент это мой вопрос: как я могу добавить класс в div, который содержит маршрутизатор-розетку, когда отображается индекс, а затем удалить при изменении маршрута, чтобы добавить?

Answer 1

Чтобы добавить класс в div, содержащий маршрутизатор-розетку на основе маршрута, вы можете использовать условный атрибут класса ngClass.

. В app.component.html добавить ngClass, который применяетindexClass, когда URL-адрес '/ index'

<div [ngClass]="url ? url + 'Class': ''">
  <router-outlet></router-outlet>
</div>

Чтобы получить текущий URL-адрес при изменении URL-адреса, выполните следующие действия в app.component.ts file

import { Component } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  url = '';

  constructor(private router: Router) {
       router.events.subscribe((route) => {
       if(route instanceof NavigationEnd){
          this.url = route.url;
          if(this.url && this.url.length > 0){
            this.url = this.url.slice(1);
          }
       }
    });
  }
}

Код выше будет захватывать текущийURL-адрес и сохранить его в переменной URL-адреса.Класс будет изменен в соответствии с маршрутом.если маршрут индексный, класс будет indexClass, если его добавить, будет addClass.

Здесь вы можете найти рабочий пример. Пример

Answer 2

Я нашел это как лучший способ: 1. в app-routing.module.ts я установил логическое свойство для индексации данных с именем isIndexSliderDialog и установил его на значение

  {
    path: 'insuranceKindSample',
    component: InsuranceKindIndexSampleComponent,
    data: { title: ' آزمایش ثبت اطلاعات نوع بیمه', icon: 'fa-bar-chart', showInMenu: true, position: 'parent' },
    children: [
      {
        path: 'master-dialog',
        component: InsuranceKindMasterDialogComponent,
        data: { title: 'Master-dialog', icon: 'fa-bar-chart', showInMenu: false },
        children: [
          {
            path: 'index',                            
            component: InsuranceKindIndexDialogComponent,
            data: { title: 'Index', icon: 'fa-bar-chart', showInMenu: false, isIndexSliderDialog: true }
          },
          {
            path: 'add',
            component: InsuranceKindCreateSampleComponent,
            data: { title: 'Add', icon: 'fa-bar-chart', showInMenu: false }
          },
          {
            path: 'edit',
            component: InsuranceKindEditSampleComponent,
            data: { title: 'Edit', icon: 'fa-bar-chart', showInMenu: false }
          },
        ]
      },

    ]
  },

затем в Insurance-Kind-Master-Dialog.Component.ts я использовал ловушки жизненного цикла, ngAfterViewInit () для проверки компонента, который загружается в router-outlet и получает свойство, которое я установил в app-routing.module.ts

  ngAfterViewInit() {
this.isIndexSliderDialog = this.route.firstChild.snapshot.data.isIndexSliderDialog;


this.router.events.subscribe(e => {
  this.isIndexSliderDialog = this.route.firstChild.snapshot.data.isIndexSliderDialog;
});

3.in Insurance-Kind-Master-Dialog.Component.html Я использовал ngClass, чтобы установить class1 для индекса и class2 для других маршрутов:

<div [ngClass]="isIndexSliderDialog== true ? 'class1' : 'class2'">
  <router-outlet></router-outlet>
</div>