Запустите функцию для сопоставленного URL в Angular NGXS - PullRequest
Новая
       27

Запустите функцию для сопоставленного URL в Angular NGXS

5 голосов
/ 31 октября 2019

Есть ли способ запустить функцию при совпадении с конкретным URL. Например: если я соответствовал URL "/ home". Можно ли выполнить это действие

this.store.dispatch (new SampleAction ())

Ответы [ 3 ]

2 голосов
/ 31 октября 2019

1.- Для одного маршрута:

Вы можете просто выполнить свою функцию в onInit() -функции вашего Компонента: 

import { Component, OnInit } from '@angular/core';

@Component({
})
export class YourComponent implements OnInit {

  constructor() { }

  ngOnInit() {
//your code here
  }

}

Каккак только вы перейдете к маршруту, ваша функция будет выполнена. Обратите внимание, что ваш маршрут должен быть добавлен к вашей маршрутизации: 

const routes: Routes = [
  {path: 'youRoute', component: YourComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

2.- Та же функция нескольких маршрутов

Если вы хотите выполнить один и тот же код длянесколько маршрутов вы можете прослушать изменения маршрута. Розетка вашего роутера должна выглядеть так: 

<router-outlet (activate)="routeChange()"></router-outlet>

А в вашем компоненте: 

  constructor(public route: Router) {}    

  myRoutes: string[] = ['/tools', '/home'];

  routeChange() {
    if (this.myRoutes.some(e => e === this.route.url)) {
      console.log('execute');
    } else {
      console.log('dont execute');
    }
  }
1 голос
/ 01 ноября 2019

Остальные ответы здесь будут работать, но при использовании NGXS Router Plugin доступен другой вариант. Вы можете прослушать поток для действий маршрутизатора, например, RouterNavigation, затем, если маршрут соответствует тому, что вы ищете, отправьте действие. 

constructor(private actions$: Actions, private store: Store) {

// Listen to the NGXS action stream for when the router navigation changes
this.actions$
    .pipe(ofActionDispatched(RouterNavigation))
    .subscribe(({routerState}: RouterNavigation) => {

      // If routerState matches your conditions then dispatch the action
        if (routerState == ) { 
          this.store.dispatch(new SampleAction());
        }
     });
}
1 голос
/ 31 октября 2019

Разве вы не можете просто поместить отправку в конструктор HomeComponent?

В противном случае вы можете использовать охрану для этого:

Маршрут: 

  path: '/home', component: HomeComponent, canActivate: [DispatchGuard]

Стражник 

@Injectable()
export class DispatchGuard implements CanActivate {

  constructor() { }

  canActivate(): boolean {
    this.store.dispatch(new SampleAction())
    return true;
  }
}
...