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>

它运行良好。

但在同一 html 页面的其他地方使用了相同的 (click)="forwardURL(Feed.urlLink)" 导航但随后重定向到主页。

  <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="#" 应该可以解决问题。

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

Angular 2 redirecting automatically using router.navigate

angular2-routing

angular