在Angular 2中,页面/组件默认会重新加载,但你可以使用路由守卫(Route Guards)来处理页面/组件不重新加载的情况。下面是一个示例:
ng generate guard canDeactivate
import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { Observable } from 'rxjs';
export interface CanComponentDeactivate {
canDeactivate: () => Observable | Promise | boolean;
}
@Injectable({
providedIn: 'root'
})
export class CanDeactivateGuard implements CanDeactivate {
canDeactivate(component: CanComponentDeactivate): Observable | Promise | boolean {
return component.canDeactivate ? component.canDeactivate() : true;
}
}
import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { CanComponentDeactivate } from './can-deactivate.guard';
@Component({
selector: 'app-my-component',
template: 'My Component
'
})
export class MyComponent implements CanComponentDeactivate {
canDeactivate(): Observable | Promise | boolean {
// 添加你的逻辑,例如:判断是否保存了修改
return confirm('Are you sure you want to leave this page without saving?');
}
}
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MyComponent } from './my-component.component';
import { CanDeactivateGuard } from './can-deactivate.guard';
const routes: Routes = [
{
path: 'my-component',
component: MyComponent,
canDeactivate: [CanDeactivateGuard] // 添加CanDeactivateGuard守卫
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
这样,当用户离开MyComponent组件时,会触发canDeactivate方法并根据返回值来决定是否阻止重新加载。
注意:CanDeactivateGuard服务也可以应用到其他需要阻止重新加载的组件上。