时间戳

首页 > 解决方案 > 具有相同组件和不同参数的角路由器链接正在附加而不是路由

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

问题描述

我有一个边栏，我正在路由。对于第一次单击，我可以进行路由，但从第二次单击开始，路由将被附加而不是替换旧视图。我已从 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>

应用程序路由.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 { }

布局组件.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 //第一次点击路由就ok了

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

标签： angulartypescriptangular-ui-router

解决方案

尝试这个。

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

推荐阅读