如何订阅特定的子路由参数？

Question

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

const routes: Routes = [
    ...
    {
        path: 'product',
        component: ProductListComponent,
        resolve: {
            products: ProductListResolverService
        },
        children: [
            {
                path: ':productcode',
                component: ProductDetailComponent,
                resolve: {
                    product: ProductDetailResolverService
                }
            },
            ...
        ]
    }
    ...

在产品列表组件中，我有一组单选按钮来指示选择了哪个产品，而路由器出口显示产品详细信息组件：

<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>
<router-outlet></router-outlet>

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

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

我尝试从 ActivatedRoute 获取 :productcode 的值，但没有成功：

this.route.paramMap.subscribe(params => {
  let productcode = params.get("productcode");

  let product = this.Products.find(product => product.Code == productcode);

  if (!!product) {
    this.SelectedProduct = product;
  }
});

paramMap.get("productcode") 始终为空。可能是因为它在产品列表路由中不可用，而是在子路由，产品详情路由中。

我还没有找到从产品列表组件订阅产品详细信息路由的方法。此外，产品详细信息路线不是产品列表路线的唯一子项。

如何订阅特定的子路由参数？

Answer 1

更好的方法之一是使用服务和observable。这样，每当子组件发生变化时，新的数据会立即反映在父组件中（尤其是当您刷新页面时，您可以保留父组件的状态）。

在您的 ProductDetailComponent 中，

import { Subscription } from 'rxjs';
import { Router, ActivatedRoute } from '@angular/router';
import { ProductService } from './product.service';


export class ProductDetailComponent {
    private subscription:Subscription;

    constructor(private activatedRoute:ActivatedRoute, private productService:productService){
    }

    public ngOnInit() {
      let vm = this;
      this.subscription = this.activatedRoute.params.subscribe(
          (param: any) => {
            if(typeof param['productcode'] !== 'undefined' && param['productcode'].trim !='' &&  typeof param['productcode']!=null){
               vm.productService.changedProductCode(param['productcode']);
            }
      });
    }
}

在您的 product.service.ts 中，

import { Subject } from 'rxjs/Subject'
import { Observable } from 'rxjs/Rx';

@Injectable()
export class myService {

  private productCode = new Subject<string>();

  productCodeChange$ = this.productCode.asObservable();
  changedProductCode(option:any){
        this.productCode.next(option);
  }
}

现在，要在您的父组件中获取更改后的产品 ID，

ProductListComponent.ts

import { Subscription } from 'rxjs';
import { ProductService } from './product.service';

export class ProductListComponent {

    private subscription:Subscription;

    constructor(private productService:productService){

        this.productService.productCodeChange$.subscribe( /* get called on every child page changes*/
         code => {

        console.log(code); // you get your passed code value in 'code' variable

        let product = this.Products.find(product => product.Code == code);

        if (!!product) {
          this.SelectedProduct = product;
        }
    });
  }
}

Answer 2

试试这样：

this.route.params.subscribe((params) => {

    let productcode = params['productcode'];

    let product = this.Products.find(product => product.Code == productcode);

    if (!!product) {
       this.SelectedProduct = product;
    }
});