在路由到具有不同参数的相同 url 后,数据未在页面上更新

问题描述 投票:0回答:4

基本上我有一个通知组件,它在单击标题中的图标时显示通知。当我们单击标题上的图标时,它会打开一个弹出窗口并显示通知列表。单击任何一个通知时,它会将用户路由到该特定通知的组件,就像单击通知一样,它会将用户带到该路由:profile/guest/{guestid}/alerts/{alertid}。但是当我们点击来自上述路由的另一个通知时,它会更改路由参数但不会重新加载新警报的数据并且仅显示旧路由的数据。

注意:显示的数据是从路由解析中获取的。由于组件已经加载,当我们点击另一个通知时,它不会调用 ngOnInit 或构造函数。但是当我们刷新页面时,它会根据更新的路线显示正确的数据。

我尝试实施不同的路由器配置解决方案来重新加载解析数据。例如 runGuardsAndResolvers 和 onSameUrlNavigation。

我还尝试在其他角度组件生命周期挂钩中调用设置数据的函数,例如 ngAfterViewInit 或 ngAfterViewChecked。

我又尝试了几个解决方案,但都没有用。

 Notification.component.ts :-(inside header component in shared module)
/**
   * * Callback when user clicks on visit button in notification modal
   * @param notification : notification 
   */
  navigateToGuestOrCustomer(notification: notification) {
    let routePath =
      notification.model == ALERT_MODEL.GUEST ? "guest" : "customers";
    let routeParamId = notification.detail_id;
    let alertId = notification.id;
    this.router.navigate([`/profile/${routePath}/${routeParamId}/alerts/${alertId}`]);
  }


edit-alert.component.ts(inside profile module in guest component>alert component)

  ngOnInit() {
    this.fetchRouteData();
    this.setGuestId();
    this.setGuestName();
  }

  /**
   * * get guest name from route resolve
   */
  setGuestName(): void {
    let guestData = this.route.parent.snapshot.data["editGuestInfo"];
    this.guestName = guestData["name"];
  }

  formData: any;
  alertListForGuest = [];
  /**Fetch Data from Resolve */
  fetchRouteData() {
    this.formData = this.route.snapshot.data["alertDetailForGuest"];
    this.alertListForGuest = this.route.snapshot.data["alertListForGuest"];
    this.alertListForGuest.push(this.formData.alert);
  }

预期结果:点击其他通知后,路由参数应更改并显示包含更新数据的所需页面。

实际结果:只改变了路线,没有改变数据。

angular routes router angular-resolver
4个回答
4
投票

ngOnInit
可能不会再次调用,如果只是路线改变,但组件没有重新创建。 您应该订阅路由更改并在那里执行您的获取和更新逻辑

import { ActivatedRoute } from '@angular/router`
constructor(private activatedRoute : ActivatedRoute){  }

ngOnInit() {
    this.activatedRoute.url.subscribe(url =>{
        // Code to get the new notification data 
        // and display it
    });
}

这样当你导航到一个新的url时,代码会再次执行


0
投票

正如你所说,它在页面刷新后显示新数据,所以在这种情况下,只需尝试在同一页面上实现 Route Reload,这样它将重新加载当前路由并获取新数据。


0
投票

不知道为什么没有人提到

ActivatedRoute.data
因为这正是它的用途.

此路由的静态和已解析数据的可观察值。

所以我通常会做这样的事情:

ngOnInit()
{
    this.activatedRoute.data.pipe(takeUntil(this.destroyed)).subscribe(data =>
    {
        // data is your resolved data 
        this.model.page = data.page;
        this.model.options = data.options;
    });
}

此代码将针对初始数据和更新后的数据运行,因此您可以删除任何已有的使用

activatedRoute.snapshot.data
.

其中

this.destroyed
是一个
Subject<void>
,它在
this.destroyed.next()
里面完成了
ngOnDestroy()


0
投票
import { Params } from '@angular/router';

ngOnInit(){
  this.route.params.subscribe((params: Params)=>{
    this.formData = params["alertDetailForGuest"];
    this.alertListForGuest = params["alertListForGuest"];
  });
}
© www.soinside.com 2019 - 2024. All rights reserved.