如何在路由 url 更改 angular 时刷新页面

Question

我有一个侧边栏，其中从 api 获取并显示项目列表。 当从侧栏中选择一个项目时，它会转到另一个下拉菜单的页面，并且所选项目的数据显示在该下拉菜单上。 但是当我从侧边栏更改项目时，所选项目的数据应该来自的页面不会刷新。

我的侧栏组件。html

<li class="nav-item" *ngFor="let data of getItemList">
  <a href="javascript:void(0)" 
     class="nav-link text-white p-3 sidebar-link" 
     (click)="list(data.Id)">
       <i class="fa fa-clipboard"></i>{{data.ItemName}}</a>
</li>

我的 sidebar.component.ts

   list(id) {
    this.router.navigate(["/dashboard/item/item-home/" + id]);
   }

我的项目-home.component.html

          <select
                type="number"
                class="form-control"
                (change)="onChangeItemData$event.target.value)"
                formControlName="GroupId"
              >
                <option hidden value="" disabled="true"
                  >Please select Item data
                </option>
                <option
                  *ngFor="let group of itemInfo"
                  type="number"
                  [ngValue]="group.Id"
                >
                  {{ group.Name }}
                </option>
          </select>

我的 item-home.component.ts

ngOnInit(): void {
  this.route.paramMap.subscribe(
    (routeParam) => {
      const id = parseInt(routeParam.get("id"));
      this.itemId = id;
    },
    (err) => { }
  );
  this.fetchGroupInfoByUseCases(this.itemId)
}

fetchGroupInfoByUseCases(Id) {
  this.usecaseServ
    .getGroupInfoByUseCase(Id)
    .subscribe((res: any) => {
      console.log(res);
      this.groupInfo = res;
    });
}

Answer 1

任何异步任务（承诺或订阅）都需要先解决，然后才能执行任何进一步的任务。 因此，当路由参数得到解析时，应该调用fetchGroupInfoByUseCases 。

ngOnInit(): void {
  this.route.paramMap.subscribe(
    (routeParam) => {
      const id = parseInt(routeParam.get("id"));
      this.itemId = id;
      this.fetchGroupInfoByUseCases(this.itemId)
    },
    (err) => { }
  );
}

fetchGroupInfoByUseCases(Id) {
  this.usecaseServ
    .getGroupInfoByUseCase(Id)
    .subscribe((res: any) => {
      console.log(res);
      this.groupInfo = res;
    });
}

Answer 2

您可以在Angular Router.url上使用事件侦听器。 示例代码：

1. 初始化 Angular 路由器

public route: any = '';

constructor( private _router: Router ) {
    this.route = this._router.url;
  }

2. 将事件监听器添加到 ngOnInit

  ngOnInit(): void {
    this._router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    )
      .subscribe(event => {
        this.route = event['url'];
        console.log(this.route)
        // do something here when route changes
      });
  }