角度 5 路由到相同的组件但不同的参数，不工作

Question

我有 Angular 5 基本初级应用程序 只有 5 个组件

我的路由和链接如下所示

//copied from app.module.ts
const appRoutes:Routes = [
  {path:'',component:HomeComponent},
  {path:'items/:cat',component:ItemsComponent},
  {path:'itemdetail/:id',component:ItemdetailComponent},
  {path:'settings',component:SettingsComponent},
];

//copied from navbar.component.html
<ul>
      <li><a [routerLink]="['/']">Home</a></li>
      <li><a [routerLink]="['/items/8']">Rashion</a></li>
      <li><a [routerLink]="['/items/2']">Vegitables</a></li>
      <li><a [routerLink]="['/items/3']">Fruits</a></li>
      <li><a [routerLink]="['/items/7']">Other</a></li>
      <li><a [routerLink]="['/items/5']">Sweets</a></li>
      <li><a [routerLink]="['/settings']">Settings</a></li>          
</ul>

//copied from items.component.ts
ngOnInit(){
    this.cat = this.route.snapshot.params['cat'];
    this.itemsSrv.getItems(this.cat)
            .subscribe((data)=>{
                this.items=data;
            });
}

链接只有在指向不同的组件时才有效，
意味着我可以从主页导航到/items/2
但是当我在项目组件中时，我可以导航到 /items/any-parameter
虽然从项目我可以去主页或设置组件。
简而言之，即使参数不同，它现在也可以导航到相同的组件。

我注意到一件事，网址发生了变化，但页面内容与旧页面相同，没有重新加载新网址:(

Answer 1

所以，最好的方法是使用 subscribe 来获取 route：

userSubscription: Subscription;
...
ngOnInit() {
   this.userSubscription = this.route.params.subscribe(
            (params: Params) => {
                 //------ some code -----
   })
}

之后，您必须退订：

ngOnDestroy(): void {
        this.userSubscription.unsubscribe()
}

Answer 2

我知道这有点晚了，但我遇到了同样的问题并找到了解决方案。您正在使用 this.route.snapshot.params 获取 id 参数。根据 Angular 文档，仅当您的组件实例永远不会被重用时才使用快照。 Snapshot 仅提供路由参数映射的初始值，不会在组件重用时更新。这意味着如果您通过 id 路由到组件，然后（在显示该组件时）尝试路由到具有不同 id 的同一组件的新实例，则初始组件将被重用，但数据不会更新，因为 ngOnInit()不会被第二次调用。

要解决问题，您必须更改；

this.cat = this.route.snapshot.params['cat'];

使用这种格式；

ngOnInit() {
  this.cat$ = this.route.paramMap.pipe(
    switchMap((params: ParamMap) =>
      this.itemsSrv.getItems(params.get('id')))
  );
}

this.route.paramMap 是从 Observable 返回的，

"暗示路由参数映射可以在生命周期内改变 这个组件”。

您可能必须修改代码的其他部分以使用 Observable (cat$)，但由于我只能看到您的部分代码，因此无法就其他更改提供建议。在下面的文档中，里程碑 3 末尾有一个项目文件 (hero-detail.component.ts)，展示了它是如何工作的。

你可以在这里阅读官方文档；

Angular2+ Observable paramMap and component reuse

希望这对编码有所帮助！

Answer 3

我认为这是最好的解决方案

constructor(route:ActivatedRoute) {
 route.params.subscribe(val => {
 // put the code from `ngOnInit` here
  });
}

路由器只有在导航到不同的路由时才会销毁并重新创建组件。当仅更新路由参数或查询参数但路由相同时，不会销毁和重新创建组件。 很高兴听到是否有帮助。

Answer 4

当您导航到同一个组件时，Angular 不会重新触发您的 ngOnInit() 方法。要使您的代码正常工作，您将需要使用可观察的 route 参数版本并订阅其更改。请务必阅读Angular Docs about routing。他们那里有很多有用的信息。

ngOnInit(){
    this.route.paramMap
        .switchMap(params => this.itemsSrv.getItems(params.get('cat')))
        .subscribe(data => {
            this.items=data;
        });
}

当您离开此组件时，您需要确保取消订阅此订阅。 Here is a discussion 关于如何做到这一点的最佳实践。

Answer 5

我在做我的项目时也遇到了这个问题，最好的方法是使用订阅路由而不是使用 Ondestroy 接口取消订阅事件

    ngOnInit{
       this._router.params.subscribe(param =>{
            // write some code
           let cat=this._router.snapshot.paramMap.get('cat');
          });
}

// 之后你必须取消订阅

    ngOnDestroy(){
    }

Answer 6

发生这种情况是因为 Angular 正在重用该组件。只需使用以下代码停止重用功能，它就会正常工作。

constructor(private router: Router) {
    // this is for routerLink on same component when only queryParameter changes
    this.router.routeReuseStrategy.shouldReuseRoute = () => false;
  }

Answer 7

如果您尝试使用不同的路由参数路由到同一个组件。这对我有用。

 getConsingmentwithId(id: number){
    this.router.navigate(['component', id], {relativeTo: this.route.parent});
  }

Answer 8

 ngOnInit() {
    this.activeRoute.queryParams.subscribe(queryParams => {
        //Do something here
    });

    //Or

    this.activeRoute.params.subscribe(routeParams => {
        this.loadUserDetail(routeParams.id);
    });
 }

当我们使用参数创建一个路由以从 API 访问数据时，以下代码有效喜欢这个

   ngOnInit() {
        this.loadUserDetail(this.id);
         // OR
        this.loadUserDetail();
     }
loadUserDetail(id){
        return this.http.get(this.apiUrl+'/'+ id).subscribe(
            (res: any) => {
                  this.products = res['data'];
                  this.seoService.updateTitle(this.products[0]['title']);
                  this.seoService.updateOgUrl(this.products[0].keyword);
                
              
   this.seoService.updateDescription(this.products[0].description);
                  console.log(this.products);
              },
            (error:HttpErrorResponse) => {
              console.log('Error in Fetching  Menu');
              this.products = error.error;
              console.log(this.products);
            }
          );
     }

抱歉英语不好和解释