【问题标题】:Link in routerlink does not changerouterlink中的链接没有改变
【发布时间】:2020-04-20 23:28:03
【问题描述】:

我正在创建一个带有链接的侧边栏。我有 3 个组件,侧边栏组件链接 2 个工具栏组件,这样我每次隐藏侧边栏时都可以拥有菜单按钮。

这是在我的侧边栏组件上。

<mat-sidenav-container class="sidenav-container">
    <mat-sidenav #drawer class="sidenav" fixedInViewport
        [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
        [mode]="(isHandset$ | async) ? 'side' : 'side'"
        [opened]="(isHandset$ | async) === false">
      <mat-toolbar>Cust_Corp</mat-toolbar>
      <div class="dashboard">
        <div class="container">
          <p><a routerLink="/cust-toolnav">Home</a></p>
          <p><a routerLink="/cust-regform">Create a customer</a></p>
          <p><a href="#">Display a customer</a></p> 
        </div>
        <router-outlet></router-outlet>
      </div>
    </mat-sidenav>

    <mat-sidenav-content>
        <app-cust-toolnav [title]="title" [burgerMenu]="isHandset$ | async" (burgerClick)="drawer.toggle()"></app-cust-toolnav>
    </mat-sidenav-content>
    <mat-sidenav-content>
        <app-cust-regform [title]="title" [burgerMenu]="isHandset$ | async" (burgerClick)="drawer.toggle()"></app-cust-regform>
    </mat-sidenav-content>  

</mat-sidenav-container>

我的第二个工具栏有一个。每次单击链接时,网址都会更改,但工具栏正文不会更改。

          <p><a routerLink="/cust-toolnav">Home</a></p>
          <p><a routerLink="/cust-regform">Create a customer</a></p>

我已经检查了应用路由模块是否包含

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CustToolnavComponent } from './cust-toolnav/cust-toolnav.component';
import { CustRegformComponent } from './cust-regform/cust-regform.component';


const routes: Routes = [
  { path: '', redirectTo: 'cust-toolnav', pathMatch: 'full' }, <-- I tried removing / and adding /.
  { path: 'cust-toolnav', component: CustToolnavComponent },
  { path: 'cust-regform', component: CustRegformComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

【问题讨论】:

  • 试试这样 [routerLink]="['/cust-toolnav']"
  • 我认为问题出在
  • 我也试过了,还是不行。

标签: angular routing navigation


【解决方案1】:

那是因为您错误地实施了sidenav。 它应该只有 1 个 &lt;mat-sidenav-content&gt; 并在 &lt;mat-sidenav-content&gt; 内放置路由器插座

【讨论】:

  • 我只尝试了一个,但它有同样的问题。我有两个组件对 sidenav 上的按钮使用相同的控件。
猜你喜欢
  • 2013-01-03
  • 2015-02-16
  • 1970-01-01
  • 1970-01-01
  • 2019-09-12
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多