运行 Angular NGXS 中匹配 URL 的函数

Question

有没有办法运行匹配特定 URL 的函数。例如：如果我匹配了 URL “/home”。是否可以运行这个动作

this.store.dispatch(new SampleAction())

Answer 1

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

Answer 2

你不能把调度放在 HomeComponent 的构造函数中吗？

否则你可以为此使用守卫：

路线：

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

后卫

@Injectable()
export class DispatchGuard implements CanActivate {

  constructor() { }

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

Answer 3

这里的其他答案也可以，但是如果您使用的是 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());
        }
     });
}

运行 Angular NGXS 中匹配 URL 的函数

Run a function on matched URL in Angular NGXS

angular

ngxs

angular-state-managmement