在 UI-Router 中如何将组件属性设置为子状态参数值

Question

我有这两个路线定义，产品列表和产品详细信息：

{
  name: "product",
  url: "/product",
  component: ProductListComponent,
  resolve: [
    {
      token: "Products",
      deps: [ApiService],
      resolveFn: (api: ApiService) => api.getProducts().toPromise()
    }
  ]
},
{
  name: "product.detail",
  url: "/:productcode",
  component: ProductDetailComponent,
  resolve: [
    {
      token: "Product",
      deps: [Transition, ApiService],
      resolveFn: (transition: Transition, api: ApiService) => 
        api.getProduct(transition.params().productcode).toPromise()
    }
  ]
}

在产品列表组件中，我有一组单选按钮来指示选择了哪个产品，而 ui-view 显示产品详细信息组件：

<div *ngFor="let product of Products" class="radio">
    <label>
        <input [(ngModel)]="SelectedProduct" 
            [value]="product" 
            (change)="RefreshDetail()" 
            name="selectedProduct" 
            type="radio"> 
            {{product.Name}} {{product.Code}}
    </label>
</div>
<ui-view></ui-view>

当用户点击单选按钮时，URL、产品详情组件和单选按钮同步正确。

但是当用户直接访问某个产品 URL 时，URL 和产品详细信息组件会显示正确的产品，但单选按钮不会。我所说的直接进入某个产品 URL 的意思是用户将 URL 输入到浏览器地址栏并回车。

我试图从 ngOnInit 中的 Transition 对象中获取 :productcode 的值：

ngOnInit() {
    let prodcode = this.transition.params().productcode;
    this.SelectedProduct = !!prodcode
        ? this.Products.find(product => product.Code == prodcode)
        : null;
}

它适用于浏览器刷新，在单选按钮中选择了正确的产品。但不适用于浏览器后退按钮，没有选择单选按钮。 （可能是因为这个父状态没有重新初始化？）

无论如何，我不确定这是获取子状态参数值的惯用方式。

根据子状态参数值设置组件属性值的正确方法是什么？

Answer 1

UI-Router Rx extensions 提供转换和参数流。在您的组件中，订阅参数流并更新 SelectedProduct

@Component({})
class {
  private sub;
  constructor(router: UIRouter) {
    this.sub = router.globals.params$.subscribe(params => {
      this.SelectedProduct = params.productcode;
    });
  }
  ngOnDestroy() {
    this.sub.unsubscribe();
  }
}

Rx 扩展已经包含在@uirouter/angular

Answer 2

您需要实现Resolver。你可以看看这里：

https://angular.io/api/router/Resolve

Resolve 在路由激活之前执行路由数据检索。因此，您可以在其他任何事情发生之前分配和管理您的数据。

这是调用某些操作时的我的解析器：

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<something> {
        return this.myService.getTitle(route.params[something.property])
            .do(result => {
                if (result && !!Object.keys(result).length) {
                    //action to update what you want
                } else {
                    this.notificationsService.addNotification(<Notification>{
                        text: this.localizationKeys.deletedOrNotExisting,
                        type: MessageColorType.warning
                    });
                    this.router.navigate([...])]); 
                    // tell the router where to go if there is any error
                }
            });

    }

您可以在您的组件中注入一个服务来跟踪每次更改并使用它来访问您的子参数。由于即使您不进行刷新也会调用解析器的逻辑，因此您可以添加几行代码来“保存”您当前的状态。