Question

我有一个侧边栏，我正在路由。对于第一次单击，我可以进行路由，但是从第二次单击开始，将添加路由，而不是替换旧视图。我已经从app.module.ts中删除了BrowserAnimationsModule

side.component.html

<aside >
   <sectionclass="sidebar" style="height: auto;">
   <ul *ngFor="let result of test_list| keyvalue let i=index" data- 
  widget="tree">

  <li  *ngFor="let result1 of result.value | keyvalue;let i=index"
    (click)="getSomevalue">


      <ul class="nav submenu " data-widget="tree" (click)="getSomevalue">
      <li *ngFor="let result2 of result.value | keyvalue" 
      >


        <a routerLink="/home/{{result2.value}}" routerLinkActive="on">

     <span>{{result2.key}}</span>
        </a>
       </li>
     </ul>
    </li>
   </ul>
     </section>
        </aside>

app-routing.module.ts

const routes: Routes = [
  {
  path: '',
  component: LayoutComponent,
  children: [
    {
      path: '',
    component: LoginComponent
    },
    {
    path: 'home',
    component: HomeComponent
    },
    {
    path: 'home/:id',

    component: HomeComponent
    }
   ]
  }

  ];

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

LayoutComponent.ts

     @Component({
   selector: 'app-valid-user-layout',
   template: `
    <app-header></app-header>

  <app-side></app-side>
   <router-outlet></router-outlet>
  <app-footer></app-footer>

 `       ,
  styles: []
   })
export class ValidUserLayoutComponent implements OnInit {

app.component.html

    <router-outlet></router-outlet>

http://localhost:4400/home/1 //第一次点击就可以了

http://localhost:4400/home/2 //路由正在添加

Answer 1

尝试一下。

 <a [routerLink]="['/home', result2.value]" routerLinkActive="on">

具有相同组件和不同参数的角路由器链接将附加而不是路由

1 个答案: