Question

我有一个包含路由器插座的主组件那是我的主要组成部分

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

那是我的routing.module

      {
    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，当url为'/ index'时将应用indexClass

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

要在网址更改时获取当前网址，请在app.component.ts文件中执行以下操作

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变量中。班级将根据路线进行相应更改。如果路由为index，则该类为indexClass，如果添加则为addClass。

在这里您可以找到工作示例。 Example

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（）来检查在路由器出口中加载的组件，并获取我在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>

如何在角度6中使用路由设置类

2 个答案: