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

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

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

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

角度路由器链接＆＃34;停止＆＃34;工作？

1 个答案: