angular路由設置及衝突問題

使用路由的時候，模板文件上若出現herf會路由衝突，herf起主要作用。

路由使用方法：

1.app.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {HttpClientModule} from '@angular/common/http';
import {NgZorroAntdModule} from 'ng-zorro-antd';
import {AppComponent} from './app.component';
import {HeaderComponent} from './header/header.component';
import {AsideComponent} from './aside/aside.component';
import {ContentComponent} from './content/content.component';
import {FooterComponent} from './footer/footer.component';
import {SidebarComponent} from './sidebar/sidebar.component';
import {Routes, RouterModule} from '@angular/router';
import {ManageComponent} from './manage/manage.component';
import {CourseComponent} from './course/course.component';

const routerConfig: Routes = [
  {path: 'manage', component: ManageComponent},
  {path: 'course', component: CourseComponent},
  {path: '', redirectTo: '/manage', pathMatch: 'full'}
];


@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    AsideComponent,
    ContentComponent,
    FooterComponent,
    SidebarComponent,
    ManageComponent,
    CourseComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    BrowserAnimationsModule,
    NgZorroAntdModule.forRoot(),
    RouterModule.forRoot(routerConfig)
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

2.文件模板上代碼

<li *ngFor="let show of shows" [class.active]="selectedid===show.id"><a  (click)="turnto(show)"><i class="fa fa-link"></i> <span>{{show.name}}</span></a></li>

a標籤中如果出現herf則會和路由衝突，造成頁面在路由指向組件頁面停留瞬間然後導向herf頁面。不能一起用

3.ts文件代碼

import {Component, OnInit} from '@angular/core';
import {Router} from '@angular/router';

@Component({
  selector: 'app-aside',
  templateUrl: './aside.component.html',
  styleUrls: ['./aside.component.css']
})
export class AsideComponent implements OnInit {

  constructor(private router: Router) {
  }

  shows: Array<Show>;
  selectedid: number;

  ngOnInit() {
    this.shows = [
      new Show(1, '主頁', 'manage'),
      new Show(2, '課程管理', 'course')
    ];
  }

  turnto(show: Show) {
    this.router.navigateByUrl(show.link);
    this.selectedid = show.id;
  }

}

export class Show {
  constructor(
    public id: number,
    public name: string,
    public link: string
  ) {
  }
}