Question

我想在路由参数更改时重新加载组件。我在侧边栏上有列表，我还想突出显示在侧边栏上选择的列表。

Sidebar.html

  1)List1
  2)List 2
  3)List 3

第一次单击第一个选项（List1）。它将路由到补充工具栏组件（this._router.navigate（['/ example / testapi'，value]））中提到的组件（testapi）。从第二次单击开始，它没有路由到（testapi组件）。还第二次调用了getSomeValue（value：String），但没有路由到（testapi组件）。

借助于在Sidebar.ts中添加以下内容

  ngOnInit() {
   this._router.routeReuseStrategy.shouldReuseRoute = function() {
     return false;
    };
   }

我可以使用不同的参数进行路由，但问题是列表正在刷新。因此，每次我从列表中单击一个值时，列表值都会刷新。我要突出显示我单击的列表值，并且列表值应为常数（单击后不应刷新）

Sidebar.ts此处我还如何用颜色突出显示所选路线

     getSomeValue(value:String){

      this._router.navigate(['/example/testapi',value]);
     }

example-routings.ts

      {
      path: 'testapi/:id',

   }

https://localhost:4200/example/testapi/123

https://localhost:4200/example/testapi/456 //这不是路由和重新加载组件

Answer 1

您可以使用Router，订阅可观察的内部构造函数。

constructor(private router: Router) {
   this.router.events.subscribe((data) => {
     //code goes here
   });
 }

Answer 2

尝试这样：

constructor(private _router: Router)

getSomeValue(value:String){

  this._router.navigate(
        [],
        {
          relativeTo: this._route,
          queryParams: { value: value },
          queryParamsHandling: 'merge'
        });
}

如果需要从参数中获取值，请执行以下操作：

  ngOnInit() {
    this.getStates();
    this._route.queryParams.subscribe(
      (params: Params) => {
        if (params.hasOwnProperty('value')) {
           console.log(params['value'])
        }
      }
    );
  }

Angular 7具有不同参数的相同路由

2 个答案: