Question

我有角度5基本的初级应用程序只有5个组件

我的路由和链接看起来像这样

ps

链接仅在进入不同组件时才起作用，
意味着我可以从主页导航到man ps
但当我在项目组件中时，我可以导航到//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; }); }
虽然从物品我可以回家或设置组件简而言之，即使参数不同，它现在也在努力导航到相同的组件。

我注意到一件事，URL正在改变，但页面内容与旧页面相同而不是重新加载新网址：（

Answer 1

因此，最好的方法是使用订阅进行路由：

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

在那之后，您必须退订：

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

Answer 2

当您导航到同一个组件时，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 3

我知道这有点晚了，但我遇到了同样的问题并找到了解决方案。您正在使用this.route.snapshot.params来获取id参数。根据Angular文档，仅在您的组件实例永远不会被重用时使用快照。快照仅提供路由参数映射的初始值，并且在重用组件时不会更新。这意味着如果您通过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')))
  );
}

从{Observable

返回this.route.paramMap

“表示路径参数映射可以在生命周期内更改这个组成部分“。

您可能需要修改代码的其他部分才能使用Observable（cat $），但由于我只能看到部分代码，因此我无法就其他更改提出建议。在下面的文档中，在里程碑3的末尾有一个项目文件（hero-detail.component.ts），显示了它的工作原理。

您可以在此处阅读官方文档;

Angular2+ Observable paramMap and component reuse

希望这有助于编码！

Answer 4

我在做项目时最好也要解决该错误的方法是使用订阅路由，而不是使用Ondestroy接口取消事件订阅

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

//之后，您必须取消订阅

    ngOnDestroy(){
    }

Answer 5

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

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

路由器仅在导航到其他路线时销毁并重新创建组件。如果仅更新路由参数或查询参数，但路由相同，则不会销毁并重新创建组件。很高兴听到您的帮助。

Answer 6

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

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

Answer 7

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

    //Or

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

当我们创建一个带有参数的路由以从 API 访问数据时，以下代码起作用，有时用户使用不同的参数第二次单击同一路由，并且我们的 ngOnint 不会第二次调用我们尝试调用的函数喜欢这个

   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);
            }
          );
     }

<块引用>

抱歉英语不好和解释

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

7 个答案: