角度ルータのリンクが「停止」していますか？

Question

app.routes.ts：

import { environment }   from './environment'; 
import { RouterModule }   from "@angular/router"; 

import { ContactUsComponent } from './static/components/contact-us.component'; 
import { HomeComponent }   from './static/components/home.component'; 
import { PrivacyComponent } from './static/components/privacy.component'; 
import { ProductDetailsComponent }  from './products/components/product-details.component'; 
import { ProductListComponent } from './products/components/product-list.component'; 
import { TermsComponent } from './static/components/terms.component'; 

export const ApplicationRoutes = RouterModule.forRoot([ 
    { 
     path: '', 
     component: HomeComponent 
    }, 
    { 
     path: 'products', 
     loadChildren : 'app/products/products.module#ProductModule'   
    }, 
    { 
     path: 'product/:id', 
     component: ProductDetailsComponent 
    } 
]); 

product.routes.ts：

import { RouterModule }   from "@angular/router"; 

import { ProductListComponent } from '../components/product-list.component'; 
import { ProductDetailsComponent } from '../components/product-details.component'; 

export const ProductRoutes = RouterModule.forChild([ 
    { 
     path: 'products', 
     component: ProductListComponent 
    } 
    , 
    { 
     path: 'product/:id', 
     component: ProductDetailsComponent 
    } 
]); 

app.component.html：

Welcome! 
<br/> 
<div> 
    <a routerLink="/">Home</a> 
</div> 

<div> 
    <product-list></product-list> 
</div> 
<div> 
    <router-outlet></router-outlet> 
</div> 
<br/> 
<div> 
    <a routerLink="terms">Terms</a> 
    <a routerLink="contact-us">Contact Us</a> 
    <a routerLink="privacy">Privacy</a> 
</div> 

製品 - list.component.html：

<product *ngFor="let p of products" [product]="p"></product> 

product.component.ts：

import { Component, Input } from '@angular/core'; 
import { Router, ActivatedRoute } from '@angular/router'; 


@Component({ 
    selector : 'product', 
    template : 
    ` <div> 
     <a [routerLink]="['product', product.id]"> 
      {{product.name}} 
     </a> 
     </div> 
}) 

私はapp.component.htmlページでは、製品のリンクをクリックしたときに何が起こるかというと、それは、その製品の情報を含むProductDetailsComponentをロードしますが、時にされますもう一度他のリンクをクリックしようとすると、ブラウザのURLは変わりますが、何も起こりません。

私が必要とするのは、最初のページの読み込みで 'local.shop.com'と言うと、製品へのリンクを含む静的コンポーネントが表示されます。app.component.html内にあり、各リンクをクリックすると、その製品。私はページをリロードすることを避けようとしています。

この質問に十分な文脈を提供するために必要なコードスニペットはありませんが、教えてください。

Answer 1

これは、URLを変更する角度成分の再利用機能によるものですが、ビューを変更するものではありません。 ProductDetailsComponentで受け取ったパラメータを購読し、何かをする必要があります。あなたのProductDetailsComponentで

1）、あなたのngOnInitでrxjs

import { Subscription } from 'rxjs/Rx'; 
import { ActivatedRoute} from '@angular/router'; 
import { Component, OnInit, OnDestroy} from '@angular/router'; 

export class ProductDetailsComponent implements onInit, onDestroy { 
private subscription: Subscription; 
productId: string; 

2）からの角度/ルートおよびサブスクリプション@からの輸入ActivatedRoute、最後の）サブスクライブし、

ngOnInit() { 
     this.subscription = this.activatedRoute.params.subscribe((params) => { 
     this.productId = params['id']; 
    //do something here to trigger the changes 
     this.product = this.productService.getProduct(this.productId); 
    //example 
    console.log(this.product); 
}); 

3その中に何かをしますしかし、少なくとも、脱退することを忘れないでください。

ngOnDestroy() { 
    this.subscription.unsubscribe(); 
    } 

もちろんあなたのコンストラクタでそれを呼び出すことを忘れないでください。

constructor(private activatedRoute: ActivatedRoute) {}