如何使用 runGuardsAndResolvers 和 onSameUrlNavigation 在 Angular 中重新运行解析器

Question

我拥有并编辑表单，并且正在使用解析器来预取数据以填写表单。当最终用户单击浏览器刷新按钮时，我想重新使用解析器。目前，数据不会被重新调用。我相信这是因为数据是在 ngOnInit 中调用的。

我在我的路由模块中实现了 runGuardsAndResolvers: 'always' 和 onSameUrlNavigation: 'reload'。这不起作用。

我尝试从构造函数调用 this.ngOnInit。我尝试将表单初始化代码放在它自己的私有函数中，并从 ngOnInit 和构造函数中调用它。这似乎可行，但似乎我必须将所有当前的 ngOnInit 代码放在私有方法中。我不确定这是否是最好的方法。

// Route code
     {
        path: ':id/details/:detailsId/edit', component: TimecardDetailsEditComponent,
        resolve: {
          resolvedTimecard: TimecardSingleResolver,
          resolvedTimecardDetailsSingle: TimecardDetailsSingleResolver
        },
        runGuardsAndResolvers: 'always'
      }
// import
RouterModule.forRoot( appRoutes, { preloadingStrategy: PreloadAllModules, enableTracing: false, onSameUrlNavigation: 'reload' } )
// within ngOnInit
this._route.data.subscribe( data => {
      const resolvedTimecardData: ITimecard = data[ 'resolvedTimecard' ];
      const resolvedTimecardDetailsData: ITimecardDetails = data[ 'resolvedTimecardDetailsSingle' ];
      // Methods set properties with data retrieved
      this.onTimecardRetrieved( resolvedTimecardData );
      this.onTimecardDetailsRetrieved( resolvedTimecardDetailsData );
    } );
// Within the ngOnInit I crete the reactive form and I have a method where I can patch the values returned from the resolved data...It is this patched method I am thinking also needs to be pulled out of ngOnInit

I simply want the resolvers to run when the end user clicks the browser refresh button.

Answer 1

我相信我想通了。单击浏览器刷新按钮，我无法让解析器重新运行

在我的构造函数中，我输入了以下代码...

    // I subscribed to the router events and stored the subscription so I can unsubscribe later.
    // I am watching for the navigation end event.
    this.navigationSubscription = this._router.events.subscribe( ( e: any ) => {
      // If the router event is NavigationEnd, I re-initalise the component due to resolvers not running
      if ( e instanceof NavigationEnd ) {
        // Method that makes necessary API calls
        this.initialiseTimecardData();
      }
    } );

我构建了 initialiseTimecardData 方法来重新获取数据。

initialiseTimecardData () {
    // Set default values and fetch data.
    // Pull parameters from url
    this.timecardId = this._route.snapshot.paramMap.get( 'id' );
    this.timecardDetailsId = this._route.snapshot.paramMap.get( 'detailsId' );
    // NMake the API call that would normally be done in the resolver
    const timecard = this._timecardDetailsSingleService.getTimecardDetails( this.timecardId );
    // Grab necessary employee data as an observable
    this._userProfile$.getEmployeeInfo()
      .subscribe(
        ( datagetEmployeeInfo: IEmployeeInfo ) => {
          this.employeeInfo = datagetEmployeeInfo;
          // Employee exists...create reactive form
          this.createTimecardDetailsForm();
          let timecardDetails: ITimecardDetails;
          timecard.subscribe(
            ( data: ITimecardDetails ) => {
              for ( const i in data ) {
                if ( data[ i ].id === +this.timecardDetailsId ) {
                  timecardDetails = data[ i ];
                  // I now have the necessary details. I call methods to populate view
                  this.onTimecardDetailsRetrieved( timecardDetails );
                  this.patchTimecardDetailsForm( this.timecardDetails );
                }
              }
            },
            ( err: any ) => console.log( err )
          );
        } );
  }

我也正在实现 OnDestroy，因为我不希望在每个导航端都调用此方法，而只在此页面上调用此方法。这应该可以防止内存泄漏

ngOnDestroy () {
    if ( this.navigationSubscription ) {
      this.navigationSubscription.unsubscribe();
    }
  }

它有效，但请让我知道是否有人看到我这样做的任何问题。我希望得到反馈。