第三张resolve守卫里面，为何照视频敲得代码，点击商品，没有显示出来呢

来源：3-8 resolve守卫

慕粉1629055924

2017-05-24

写回答

3回答

最外的红

2017-06-19

我把这一句删了就能用了（虽然时间久远。但是还是回一下给后人用吧）

    this.routeInfo.params.subscribe((params: Params) => this.productId = params['id']);

这个应该是重复了ID的获取。

慕粉1629055924

提问者

2017-05-26

/***
app-routing.module.ts
***/
const routes: Routes = [
  {path: '', redirectTo: '/home', pathMatch: 'full'},
  {path: 'chat', component: ChatComponent, outlet: 'aux'},
  {path: 'home', component: HomeComponent},
  {
    path: 'product/:id', component: ProductComponent,
    resolve: {
      product: ProductResolve
    },
    children: [
      {path: '', component: ProductDescComponent},
      {path: 'seller/:id', component: SellerInfoComponent}
    ]
  },

  {path: '**', component: Code404Component},
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [ProductResolve]
})


/***
*product.component.html
**/
<div class="product">
<p> 这里是商品信息组件</p>
<p>
  商品的ID是:{{productId}}
</p>
  <p>商品名称是:{{productName}}</p>
<a [routerLink]="['./']">商品描述</a>
<a [routerLink]="['./seller',99]">销售员信息</a>
<router-outlet></router-outlet>
</div>

/**
**product.component.html
**/
import {Component, OnInit} from '@angular/core';
import {ActivatedRoute, Params} from '@angular/router';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
  private productId: number;
  private productName: string;

  constructor(private routeInfo: ActivatedRoute) {
  }

  ngOnInit() {
    // this.productId = this.routeInfo.snapshot.queryParams['id'];
    // this.productId = this.routeInfo.snapshot.params['id'];
    /***
     * 参数订阅
     */
    this.routeInfo.params.subscribe((params: Params) => this.productId = params['id']);
    this.routeInfo.data.subscribe((data: { product: Product }) => {
      this.productId = data.product.id;
      this.productName = data.product.name;
    });
  }
}

export class Product {
  constructor(public  id: number, public name: string) {

  }
}

/**
**app.component.html
**/
<a [routerLink]="['/home']">主页</a>
<!--<a [routerLink]="['/product']" [queryParams]="{id:1}">商品详情</a>-->
<a [routerLink]="['/product',1]" >商品详情</a>
<input type="button" value="商品详情" (click)="toProductDetail()">

<a [routerLink]="[{outlets:{primary:'home',aux:'chat'}}]">开始聊天 </a>
<a [routerLink]="[{outlets:{aux:null}}]">结束聊天</a>
<router-outlet></router-outlet>
<router-outlet name="aux"></router-outlet>

/**
**app.component.ts
**/
import {Component} from '@angular/core';

import {Router} from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';

  constructor(private  router: Router) {

  }

  toProductDetail() {
    // this.router.navigate(['/product']);
    this.router.navigate(['/product', 1]);
  }
}