angular - 在 Angular NGXS 中对匹配的 URL 运行函数

Question

有没有办法在匹配特定 URL 时运行函数。例如：如果我匹配了一个 URL“/home”。是否可以运行此操作

this.store.dispatch(new SampleAction())

Answer 1

1.- 对于单一路线：

您可以在onInit()组件的 -function 中执行您的功能：

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');
    }
  }

Answer 2

此处的其他答案将起作用，但是如果您使用的是 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());
        }
     });
}

Answer 3

不能直接把 dispatch 放到 HomeComponent 的构造函数中吗？

否则，您可以为此使用警卫：

路线：

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

警卫

@Injectable()
export class DispatchGuard implements CanActivate {

  constructor() { }

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