Question

在我的应用程序中，我有两个应用程序，第一个是Basic，它的路由如下：本地主机：4200 /表格，本地主机：4200 /报告，本地主机：4200 / views，但是现在我在第二个上，即“高级”，我想设置如下路线：本地主机：4200 /高级/视图本地主机：4200 /高级/表格并且标题也应该不同。

这是我的app-routing.module.ts：

  const routes: Routes = [
      { path: 'report', component: ReportComponent },
      { path: 'form', component: RequestFormComponent},
      {
        path: 'advanced',
        component: AdvancedLevelComponent,
      },
      { path: 'aform', component: PmCustomerFormComponent }

    // I have tried: 
    {
        path: 'advanced',
        component: AdvancedLevelComponent,
        childern:[
            {{ path: 'aform', component: PmCustomerFormComponent }}
        ]
      },
      // but it it asks for <router-outlet></router-outlet> in that component and hence it 
render view in same page, I want it be like go to new page with URL: /advanced/aForm

和我的头文件：

<mat-toolbar>
  <img [src]="logo" class="logo" routerLink="/mainpage">
  <span class="title">
   Basic
  </span>
</mat-toolbar>
<mat-toolbar *ngIf="router.url==='/advanced'">
  <img [src]="logo" class="logo" routerLink="/mainpage">
  <span class="title">
  Advanced
  </span>
</mat-toolbar>

但是route.url仅适用于高级主页面，不适用于子页面

Answer 1

我已修复它：

在标题中。ts

import {Location,LocationStrategy,PathLocationStrategy } from '@angular/common';

和

   @Component({
     providers: [
     Location,
     { provide: LocationStrategy, useClass: PathLocationStrategy }
     ]
)}

并创建如下功能：

isAdvancedRoute(): boolean {
        return this.location.path().indexOf('/advanced') > -1;
      }

最终在

.html

*ngIf="isAdvancedRoute()"

根据Angular中的URL更改标题

1 个答案: