Angular 2 — 浏览网页而不重新加载那些页面通用的组件 [英] Angular 2 — navigate through web pages without reloading a component that is common for those pages
问题描述
您可以在此处找到示例应用:http://ivan-khludov.com/>
这是我的根组件:
import { Component } from '@angular/core';@成分({选择器:'根',模板:`<h1>我的虚拟 Angular 应用程序</h1><路由器插座></路由器插座><导航><a routerLink="/section-1/1" routerLinkActive="active">第 1 部分 - 第 1 页</a><span>||</span><a routerLink="/section-1/2" routerLinkActive="active">Section 1 - Page 2</a><span>||</span><a routerLink="/section-2/1" routerLinkActive="active">Section 2 - Page 1</a><span>||</span><a routerLink="/section-2/2" routerLinkActive="active">Section 2 - Page 2</a></nav>`})导出类 AppWrapper {}
第 1 部分第 1 页的组件:
import { Component } from '@angular/core';@成分({选择器:'secapagea',模板:`<h2>第 1 部分 - 第 1 页</h2><countera></countera>`})导出类 Section1Page1 {}
第 1 部分第 2 页几乎相同:
import { Component } from '@angular/core';@成分({选择器:'secapageb',模板:`<h2>第 1 部分 - 第 2 页</h2><countera></countera>`})导出类 Section1Page2 {}
一个计数器组件:
import { Component } from '@angular/core';@成分({选择器:'countera',模板:`<div>经过的秒数:{{this.count}}</div>`})导出类 Section1Counter {计数:数量;构造函数(){this.count = 0;setInterval(() => {this.count++;}, 1000);}}
把我打开的部分的第一页的情况.有没有办法在不重新加载计数器的情况下导航到同一部分的第二页?我想为此类导航问题找到一个通用的解决方案 - 它可能不是计数器组件,而是侧边栏导航或部分标题或其他内容.
是的,完全可以编写一个可以处理多个 Routes 的 Component,而无需每次都重新构建 Component.
如果您创建一个组件来处理所有页面,如定义的以下路由:
const 路由:路由 = [{ 路径:'section-1/:page',组件:Section1PageX }];
您可以订阅路由参数页面"并处理组件内的页面更改.这可以防止 Angular2 每次都重新构建页面组件.
@Component({选择器:'secapagea',模板:`<h2>第 1 部分 - 第 {{page}} 页</h2><countera></countera>`})导出 Section1PageX {私人页面:字符串;构造函数(私有路由:ActivatedRoute){}ngOnInit() {this.sub = this.route.params.subscribe(params => {this.page = params['page'];//处理页面变化});}ngOnDestroy() {//当您离开该部分时取消订阅this.sub.unsubscribe();}}
所以你的 Section1Counter 组件只有在你离开整个部分时才会被销毁.
您还可以在我们的博客文章 Angular 中阅读更多相关信息2 示例
Here you can find an example app: http://ivan-khludov.com/
This is my root component:
import { Component } from '@angular/core';
@Component({
selector: 'root',
template: `
<h1>My Dummy Angular App</h1>
<router-outlet></router-outlet>
<nav>
<a routerLink="/section-1/1" routerLinkActive="active">Section 1 - Page 1</a>
<span>||</span>
<a routerLink="/section-1/2" routerLinkActive="active">Section 1 - Page 2</a>
<span>||</span>
<a routerLink="/section-2/1" routerLinkActive="active">Section 2 - Page 1</a>
<span>||</span>
<a routerLink="/section-2/2" routerLinkActive="active">Section 2 - Page 2</a>
</nav>
`
})
export class AppWrapper {
}
A component for section 1, page 1:
import { Component } from '@angular/core';
@Component({
selector: 'secapagea',
template: `
<h2>Section 1 - Page 1</h2>
<countera></countera>
`
})
export class Section1Page1 {
}
Almost the same thing for section 1, page 2:
import { Component } from '@angular/core';
@Component({
selector: 'secapageb',
template: `
<h2>Section 1 - Page 2</h2>
<countera></countera>
`
})
export class Section1Page2 {
}
A counter component:
import { Component } from '@angular/core';
@Component({
selector: 'countera',
template: `
<div>Seconds elapsed: {{this.count}}</div>
`
})
export class Section1Counter {
count: number;
constructor() {
this.count = 0;
setInterval(() => {
this.count ++;
}, 1000);
}
}
Put the case that I opened the first page of the section. Is there a way to navigate to the second page of the same section without reloading the counter? I want to find a general solution for such navigation issues — it could be not a counter component but sidebar navigation or section heading or something else.
Yeah it is absolutely possible to write a Component which can handle multiple Routes without reconstructing the Component each time.
If you create a component which handles all pages together as defined with the following route:
const routes: Routes = [
{ path: 'section-1/:page', component: Section1PageX }
];
You can subscribe on the route parameter "page" and handle the page change within your Component. This prevents Angular2 from reconstructing the page Component each time.
@Component({
selector: 'secapagea',
template: `
<h2>Section 1 - Page {{page}}</h2>
<countera></countera>
`
})
export Section1PageX {
private page: string;
constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.sub = this.route.params.subscribe(params => {
this.page = params['page'];
//handle the page change
});
}
ngOnDestroy() {
//unsubscribe when you leave the section
this.sub.unsubscribe();
}
}
So your Section1Counter Component will only be destroyed if you leave the entire section.
You can also read more about this in our Blog Post Angular 2 by Example
这篇关于Angular 2 — 浏览网页而不重新加载那些页面通用的组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!