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
内部产品的链接,当您点击时在每个链接上,它提供有关该产品的信息。我试图避免重新加载页面。
我不确定需要哪些代码段才能为此问题提供足够的上下文,但请告知我们。
答案 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) {}