我已将此GitHub repository中的应用程序用作我的角度路由问题的演示应用程序。
应用程序运行正常。因此,应用程序本身并不是我关注的重点,因为它是如此简单,但是如果需要,您可以完全访问其代码!
我的问题是,每次在此有角度的应用程序中导航时,都会生成相关组件的新实例。
我对代码进行了一些更改以说明此实例。我添加了一个简单的计数器,如下所示:
export class ContactListComponent implements OnInit {
contacts: any[] = [];
counter = 0; //<--- counter definition
constructor(private contactService: ContactService) {
console.log("List Component constructor: #" + ++this.counter); //<--- usage #1
}
ngOnInit() {
console.log("List Component ngInit: #" + ++this.counter); //<--- usage #2
this.contactService.getContacts().subscribe((data: any[]) => {
this.contacts = data;
});
}
}
[如果您查看下图,则通过每次导航我生成了一个新实例,因此每次都会重置计数器,并在控制台中显示ngInit
和constructor
被再次调用,再次:
我什至尝试使用以下代码片段进行导航,但结果相同!:
import { Router, ActivatedRoute } from '@angular/router';
constructor(
private router: Router
) { }
this.router.navigate(['/contacts']);
问题是如何防止这个新实例!?
特别是,当我们从第二页导航回到第一页时。我正在寻找一种像Singleton这样的技术,该技术仅在我们第一次访问路线时会实例化该组件,而在其他时候访问该路线时,则会获得该组件的同一瞬间。
实际上,这个应用程序不是我正在使用的主要应用程序,我的主要问题是在另一个我使用subscription technique
共享数据的应用程序中,然后当我有一个组件的多个实例时,以下代码在不同的实例中将被解雇,结果与预期不符。为什么?因为if (this.agreeTerms)
同时在不同实例中具有不同的值!
navNext(next) {
this.next = next;
if (this.next === true && this.router.url.startsWith('/') && this.router.url.endsWith('/')) {
this.data.unsetNext();
if (this.agreeTerms) { //<-----
this.router.navigate(['/form']);
} else {
this.error = 'Please accept the terms and conditions';
this.scrollBottom();
}
}
}
关于您正确的@anatoli注释,使用RouteReuseStrategy将解决此问题。例如,请参见here。首先,我们必须创建一个服务类:
RouteReuseService.ts
import {
RouteReuseStrategy,
ActivatedRouteSnapshot,
DetachedRouteHandle,
RouterModule,
Routes,
UrlSegment
} from '@angular/router';
export class RouteReuseService implements RouteReuseStrategy {
private handlers: { [key: string]: DetachedRouteHandle } = {};
shouldDetach(route: ActivatedRouteSnapshot): boolean {
if (!route.routeConfig || route.routeConfig.loadChildren) {
return false;
}
let shouldReuse = false;
console.log('checking if this route should be re used or not’, route');
if (route.routeConfig.data) {
route.routeConfig.data.reuse ? shouldReuse = true : shouldReuse = false;
}
return shouldReuse;
}
store(route: ActivatedRouteSnapshot, handler: DetachedRouteHandle): void {
console.log('storing handler');
if (handler) {
this.handlers[this.getUrl(route)] = handler;
}
}
shouldAttach(route: ActivatedRouteSnapshot): boolean {
console.log('checking if it should be re attached');
return !!this.handlers[this.getUrl(route)];
}
retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
if (!route.routeConfig || route.routeConfig.loadChildren) {
return null;
};
return this.handlers[this.getUrl(route)];
}
shouldReuseRoute(future: ActivatedRouteSnapshot, current: ActivatedRouteSnapshot): boolean {
let reUseUrl = false;
if (future.routeConfig) {
if (future.routeConfig.data) {
reUseUrl = future.routeConfig.data.reuse;
}
}
const defaultReuse = (future.routeConfig === current.routeConfig);
return reUseUrl || defaultReuse;
}
getUrl(route: ActivatedRouteSnapshot): string {
if (route.routeConfig) {
const url = route.routeConfig.path;
console.log('returning url', url);
return url;
}
}
}
下一步,我们必须在app.module.ts中进行一些更改:
providers: [{provide: RouteReuseStrategy, useClass: RouteReuseService}],
bootstrap: [AppComponent]
在最后一步,我们必须将组件的'reuse'设置为true,我们希望在应用程序中重复使用该组件(在app-routing.modules.ts中)。例如,在这里我们要重用DetailComponent:
const routes: Routes = [{ path: '', component: HomeComponent },
{
path: 'detail', component: DetailComponent, data: {
reuse: true
}
}, { path: 'item', component: ItemComponent }];