ng-reload-resolve v1.0.2

NgReloadResolve

Reload angular routing resolve.

Install

npm install ng-reload-resolve

Getting Started

1. Import

import { ReloadResolveModule } from 'ng-reload-resolve';

@NgModule({
  ...something...
  imports: [ReloadResolveModule]
})
export class YourModule {}

2. DI

export class MyTestComponent implements OnInit {
  constructor(
    public reloader: ReloadResolveService
  ) {}

  ngOnInit() {}

  doReload() {
    this.reloader.reloadResolve().then(console.log);
  }

Example

1. Create a simple resolve

// Sample Resolve
@Injectable()
export class TimeResolve implements Resolve<number[]> {
  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): number[] | Observable<number[]> | Promise<number[]> {
    return route.queryParams['time']; // always get time from query params
  }
}

2. Create routing component

// Your Routing Component
@Component({
  selector: 'app-my-test',
  templateUrl: `
  <p>
    resolve from query: time={{time}}
  </p>
  <button (click)="updateTime()">UpdateTime</button>
  <button (click)="reload()">Reload</button>
  <button (click)="updateTimeAndReload()">updateTimeAndReload</button>
  `,
  styleUrls: ['./my-test.component.css']
})
export class MyTestComponent implements OnInit {
  time; // show on page

  constructor(
    public reloader: ReloadResolveService,
    public router: Router,
    public route: ActivatedRoute
  ) {
    route.data.subscribe(x => {
      // when resolve loaded
      this.time = x['time']; // set value to this.time
    });
  }

  ngOnInit() {}

  updateTime() {
    this.router.navigate([], {
      // navigate to self
      queryParams: {
        // change query (use to test Resolve)
        time: new Date().getTime()
      }
    });
  }

  reload() {
    // reload Resolve
    this.reloader.reloadResolve();
  }

  updateTimeAndReload() {
    this.router
      .navigate([], {
        // navigate to self
        queryParams: {
          // change query (use to test Resolve)
          time: new Date().getTime()
        }
      })
      .then(x => {
        this.reloader.reloadResolve();
      });
  }
}

Demo