角度路由器链接"停止"工作?

时间:2017-11-20 03:06:12

标签: javascript angular

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,但当我尝试再次点击其他链接时,会显示该网址在浏览器中更改但没有任何反应。

我需要的是,在首页加载时,请说“local.shop.com&#39;”,会显示一个静态组件,其中包含app.component.html内部产品的链接,当您点击时在每个链接上,它提供有关该产品的信息。我试图避免重新加载页面。

我不确定需要哪些代码段才能为此问题提供足够的上下文,但请告知我们。

1 个答案:

答案 0 :(得分:1)

这是由于角度组件重用功能,它改变了网址,但没有改变视图。您需要订阅ProductDetailsComponent中收到的参数,并对其执行某些操作。

1)在您的ProductDetailsComponent中,从@ angular / route导入ActivatedRoute,从rxjs导入Subscription

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)在你的ngOnInit中,订阅并在其中做一些事情

  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) {}