要使用Angular路由器事件,可以使用Router事件观察者来监听路由器事件。下面是一个示例:
首先,在app.module.ts文件中导入RouterModule和Router模块:
import { RouterModule, Router, NavigationStart, NavigationEnd, NavigationError, NavigationCancel, RoutesRecognized } from '@angular/router';
然后,在NgModule的imports数组中添加RouterModule.forRoot():
@NgModule({
imports: [
RouterModule.forRoot(routes)
],
...
})
export class AppModule { }
接下来,在组件中注入Router,并订阅路由器事件:
import { Router, NavigationStart, NavigationEnd, NavigationError, NavigationCancel, RoutesRecognized } from '@angular/router';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
constructor(private router: Router) { }
ngOnInit() {
this.router.events.subscribe(event => {
if (event instanceof NavigationStart) {
// 处理导航开始事件
console.log('Navigation started');
}
if (event instanceof NavigationEnd) {
// 处理导航结束事件
console.log('Navigation ended');
}
if (event instanceof NavigationError) {
// 处理导航错误事件
console.log('Navigation error');
}
if (event instanceof NavigationCancel) {
// 处理导航取消事件
console.log('Navigation canceled');
}
if (event instanceof RoutesRecognized) {
// 处理路由识别事件
console.log('Routes recognized');
}
});
}
}
在上面的示例中,我们使用了router.events订阅路由器事件。然后,我们使用instanceof运算符检查事件的类型,并在控制台打印出相应的消息。你可以根据你的需求来处理这些事件。
希望这个示例能帮到你!