Question

我目前有一个容器（有状态）组件，它根据select方法中的路由参数（id）调度get和ngOnInit操作。这些操作的重点是在我的商店中拥有数据和选定的ID。

我很好奇在旋转变压器中发送这些行为是否正确？

感谢您的回复。

我的组件：

@Component({
  selector: 'app-container',
  templateUrl: './container.component.html',
  styleUrls: ['./container.component.css']
})
export class ContainerComponent implements OnInit, OnDestroy {

  private componetDestroyed$ = new Subject();

  constructor(private store: Store<fromRoot.State>, private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.params
      .filter(params => params['id'])
      .map(params => params['id'])
      .takeUntil(this.componetDestroyed$)
      .subscribe(id => {
        this.store.dispatch(new GetAction(id));
        this.store.dispatch(new SelectAction(id));
      });
  }

  ngOnDestroy() {
    this.componetDestroyed$.next();
    this.componetDestroyed$.unsubscribe();
  }   
}

我的路线：

[{
  path: ':id',
  component: ContainerComponent
}]

解析器将是：

@Injectable()
class MyResolver implements Resolve<any> {

constructor(private store: Store<fromRoot.State>) {}

resolve(route: ActivatedRouteSnapshot, state: RouteStateSnapshot) {
  let id = route.params['id'];
  this.store.dispatch(new SelectAction(id));
  this.store.dispatch(new GetAction(id));
  return null;
}

修改后的路线：

[{
  path: ':id',
  component: ContainerComponent,
  resolve: {
    store: MyResolver
  }
}]

这就是为什么我不确定这是正确的，因为商店总是null。

Answer 1

基于ngOnInit在this.route.params中分配动作的方式没有什么问题。

重要的是，解析器是路由的数据提供者。而且，如果您不提供数据，那么您将错误地使用它们。

在您看来，这听起来更像是canActivate警卫，负责发出动作并允许路线。

尽管如此，您可以将解析器扩展到选择所需的数据。

@Injectable({
    providedIn: 'root',
})
export class DataResolver implements Resolve<number> {
    constructor(private store: Store) {
    }

    public resolve(
        route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot
    ): Observable<any> {
        this.store.dispatch(LoadDataForMyRoute());

        return this.store.pipe(
            select(dataForMyRoute),
            filter(data => !!data), // <- waiting until data is present
            take(1), // <- important to add
        );
    }
}

，在您的组件中，您可以像这样访问它而不是this.store.select。

constructor(
    protected readonly store: Store,
    protected readonly activatedRoute: ActivatedRoute,
) {}

public ngOnInit(): void {
    this.activatedRoute.data.subscribe(data => {
        // everything is here.
    });
}

在路线解析器

1 个答案: