Question

在我的Angular（v7）应用程序中，尽管在浏览器地址栏中更改了URL，但是单击路由器链接不会加载相关组件。

重新加载页面后，单击浏览器的刷新按钮，则路由器链接将按预期开始工作。我已经在Google Chrome和IE中确认了这种行为。

您能告诉我我在做什么错吗？在哪里？我在下面共享了代码的相关部分。

应用模块和路由器设置

import {
  RouterModule,
  Routes
} from "@angular/router";
...

const appRoutes: Routes = [{
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'bookings', 
    component: BookingsComponent, 
    canActivate: [AuthGuard]}, 
  {
    path: 'rates', 
    component: RatesComponent, 
    canActivate: [AuthGuard]},
  {
    path: '',
    redirectTo: '/bookings',
    pathMatch: 'full',
    canActivate: [AuthGuard]
  },
  {
    path: '**',
    component: PageNotFoundComponent
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes, {
      enableTracing: false
    }),
    BrowserModule,
    ...
  ]
})
export class AppModule {}

HTML模板中的路由器链接

<a class="side-nav-link" routerLink="/rates" routerLinkActive="active">Rates</a>
<a class="side-nav-link" routerLink="/bookings" routerLinkActive="active">Bookings</a>

Auth Guard，如果相关

@Injectable({
  providedIn: "root"
})
export class AuthGuard implements CanActivate {

  constructor(private router: Router, private authService:AuthService) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {

    if (this.authService.loggedIn) {
      return true;
    }

    this.router.navigate( ['/login'], { queryParams: { returnUrl: state.url }});
    return false;
  }
}

Answer 1

我有同样的问题。这是由于在单个页面上有两个路由器出口，并使用ngIf在两者之间切换而引起的。这似乎是一个Angular反模式。

原因

这是我正在做的事的一个例子：

文件：app.component.html

<!-- Show toolbar and sidenav if logged in -->
<mat-toolbar *ngIf="isLoggedIn()">My App</mat-toolbar>
<mat-sidenav-container *ngIf="isLoggedIn()">
  <mat-sidenav>
    <mat-nav-list>
      <a mat-list-item routerLink="/page1">Page 1</a>
      <a mat-list-item routerLink="/page2">Page 2</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

<!-- Hide toolbar and sidenav if NOT logged in -->
<router-outlet *ngIf="isLoggedIn() === false"></router-outlet>

文件：app-routing.module.ts

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'page-1', component: Page1Component, canActivate: [AuthGuard] },
  { path: 'page-2', component: Page2Component, canActivate: [AuthGuard] },
  { path: '**', redirectTo: 'page-1' }
];

之所以这样做，是因为我想要两种布局：一种用于我的主应用程序内容（带有工具栏和侧面导航），另一种用于我的登录页面（没有工具栏和侧面导航）。

解决方案

执行此操作的正确方法是创建两个组件，一个用于所需的每个布局，然后使用routers children属性。 Link to docs。例如：

文件：app.component.html

<router-outlet></router-outlet>

文件：layouts / main-layout.component.html

<mat-toolbar>My App</mat-toolbar>
<mat-sidenav-container>
  <mat-sidenav>
    <mat-nav-list>
      <a mat-list-item routerLink="/page1">Page 1</a>
      <a mat-list-item routerLink="/page2">Page 2</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

文件：layouts / login-layout.component.html

<router-outlet></router-outlet>

文件：app-routing.module.ts

const routes: Routes = [
  {
    path: 'login', component: LoginLayoutComponent, children: [
      { path: '', component: LoginComponent },
    ]
  },
  {
    path: '', component: MainLayoutComponent, children: [
      { path: 'page-1', component: Page1Component, canActivate: [AuthGuard] },
      { path: 'page-2', component: Page2Component, canActivate: [AuthGuard] },
      { path: '**', redirectTo: 'page-1' }
    ]
  },
];

希望这会有所帮助：）

Answer 2

const appRoutes: Routes = [{
  path: 'login',
  component: LoginComponent
 },
 {
  path: 'rates',
  component: RatesComponent
 },
 {
  path: 'bookings',
  component: BookingsComponent
 },
 {
  path: '',
  redirectTo: '/bookings',
  pathMatch: 'full',
  canActivate: [AuthGuard]
 },
 {
  path: '**',
  component: PageNotFoundComponent
 },
];

您的路线应该是这样。

在使用浏览器的刷新按钮重新加载应用程序之前，Angular路由器链接不起作用

2 个答案: