Angular 2使用router.navigate自動重定向

Question

router.navigate()在一個案例中工作正常，並重定向到另一個案例的主頁。

app.module.ts

  const appRoutes: Routes = [
  { path: 'news/:urlLink', component: ArticlereaderComponent },
  { path: '', component: HomeComponent }
  ]

home.component.ts

  public forwardURL(urlLink: string) {   
       this.router.navigate(['news/' + urlLink]);
  }

article.reader.ts //路由后來到這里

 constructor(public route: ActivatedRoute, public http: HttpClient) {
      this.route.params.subscribe(params => {     
       this.parameterLink = params.urlLink;   
      });
  this.getArticle();
  }

  public getArticle() {
  this.http.get(this.APIHost 
  /feed/FeedByUrl/"+this.parameterLink+"/").subscribe(data => {
  this.feed = data;     
  });

}

home.component.html

 <div class="row">
  <div class="col-sm-4" style="padding: 2px;" *ngFor="let Feed of TopStories" (click)="forwardURL(Feed.urlLink)">
    <div class="card card-inverse">
      <img class="card-img" src="{{Feed.headLineImage}}" alt="Card image">
      <div class="card-img-overlay">
        <div class="catagory">{{Feed.catagory}}</div>
        <p class="card-text">{{Feed.headline}}</p>
      </div>
    </div>
  </div>
</div>

它工作得很好。

但是相同的(click)="forwardURL(Feed.urlLink)"在同一個html頁面中的其他地方使用，但隨后會重定向到主頁。

  <div class="list-group" *ngFor="let Feed of MostRead" (click)="forwardURL(Feed.urlLink)">
      <a href="#" class="list-group-item mostread list-group-item-action flex-column align-items-start">
        <div class="d-flex flex-row">
          <div class="d-inline-flex p-2">
            <img src="{{Feed.headLineImage}}" style="height: 67px;width: 70px;" alt="">
          </div>
          <div class="d-flex p-2">
            <p class="mb-1">{{Feed.headline}}</p>
          </div>
        </div>
      </a>
    </div>

重定向到上述案例的主頁，這個<div>都在同一頁面home.component.html

Answer 1

我猜，帶有href="#"的錨標簽就是為你創造問題的原因。 它嘗試重定向到# （空白）路由，但是你有/home作為后備路由它重定向到/home 。

從你的錨中刪除href="#"應該可以解決問題。