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自动重定向

1 个答案: