路由器angular2不适用于相同的组件,但是difefrenet id

时间:2016-09-04 14:20:16

标签: angular typescript angular2-routing

我还在使用alpha8路由器。我有3条主要路线:

export const appRoutes: RouterConfig = [
    { path: '', component: LandingComponent },
    { path: 'blog', component: BlogComponent },
    { path: 'posts/:id', component: PostComponent },
    { path: 'posts',  redirectTo: 'blog' },
    { path: '**', redirectTo: ''}  
];

所以我有一个带有特色帖子和链接的组件,可以从BlogComponent中运行得很好,但是当这个组件在PostComponent中时,id只会更改url地址。 这就是链接在该组件中的样子

<a [routerLink]="['/posts/'+post.id]">...</a>

所以当我们在localhost:5000/blog时,它可以很好地路由到localhost:5000/posts/19 f.ex.但是从localhost:5000/posts/19开始,它不会转到localhost:5000/posts/20。它只会更改网址,contstructorngOnInit不会被执行。我该如何解决这个问题?

2 个答案:

答案 0 :(得分:3)

您必须添加&#34;订阅者&#34;在ngOnInit内部捕获url params的变化。此外,您应该取消订阅ngOnDestroy(将其实现到您的组件类,就像使用OnInit一样),以避免内存泄漏。

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

@Component({
    selector: 'your-posts-component'
})
export class PostsComponent implements OnInit, OnDestroy {

private sub: any;

constructor(private route: ActivatedRoute ) {}

// add a subscriber to watch for changes in the url
ngOnInit() {
    this.sub = this.route.params
       .subscribe(params => {
          // get id from params
          let id = +params['id'];

          // do whatever you want with id here

        });
      }
}

// unsubscribe to avoid memory leaks
ngOnDestroy() {
    this.sub.unsubscribe();
}

这是在重新访问组件而不通过另一个组件时检测到url参数的更改的方式。

答案 1 :(得分:0)

*选项设置为onSameUrlNavigation

reload