没有组件的 Angular2 路由
Angular2 routing without component
我想监听NavigationStart事件,判断它的url
属性是否为/logout
。
如果是这样,路由器应该停止触发连续事件,例如 RoutesRecognized、GuardsCheckStart、ChildActivationStart 等., 当我的监听器检测到正确的 NavigationStart 事件时。
否则路由器应该继续路由。
我不想使用组件,因为我不会显示任何 /logout
视图。
import { Component, OnInit } from '@angular/core';
import { Router, NavigationStart } from '@angular/router';
@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent implements OnInit {
constructor(
private router: Router,
) {
router.events.filter(event => event instanceof NavigationStart).subscribe(
(event: NavigationStart) => {
if (event.url == '/logout') {
this.logout();
// TODO stop firing successive events
}
}
);
}
ngOnInit() { }
logout() {
// TODO logout operations
}
}
你可以使用路由守卫。当路由匹配'logout'时,'YourGuard'将用于激活或不激活路由。如果守卫 returns 为真,它将被重定向到 'users/sign_in' (只是一个例子)。如果没有,您可以在 YourGuard 中重定向到其他路径或执行其他操作。
{ path: 'logout', canActivate: [ YourGuard ], redirectTo: 'users/sign_in' }
您不需要 'listen' 参加路线活动。
阅读更多关于警卫的信息 here。
使用 LoginComponent 而不是 redirectoTo:
{
path: 'logout',
canActivate: [YourGuard],
component: TheLoginComponent,
}
现在在 YourGuard 中,您可以从本地存储或类似的东西中删除用户...
我想监听NavigationStart事件,判断它的url
属性是否为/logout
。
如果是这样,路由器应该停止触发连续事件,例如 RoutesRecognized、GuardsCheckStart、ChildActivationStart 等., 当我的监听器检测到正确的 NavigationStart 事件时。
否则路由器应该继续路由。
我不想使用组件,因为我不会显示任何 /logout
视图。
import { Component, OnInit } from '@angular/core';
import { Router, NavigationStart } from '@angular/router';
@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent implements OnInit {
constructor(
private router: Router,
) {
router.events.filter(event => event instanceof NavigationStart).subscribe(
(event: NavigationStart) => {
if (event.url == '/logout') {
this.logout();
// TODO stop firing successive events
}
}
);
}
ngOnInit() { }
logout() {
// TODO logout operations
}
}
你可以使用路由守卫。当路由匹配'logout'时,'YourGuard'将用于激活或不激活路由。如果守卫 returns 为真,它将被重定向到 'users/sign_in' (只是一个例子)。如果没有,您可以在 YourGuard 中重定向到其他路径或执行其他操作。
{ path: 'logout', canActivate: [ YourGuard ], redirectTo: 'users/sign_in' }
您不需要 'listen' 参加路线活动。 阅读更多关于警卫的信息 here。
使用 LoginComponent 而不是 redirectoTo:
{
path: 'logout',
canActivate: [YourGuard],
component: TheLoginComponent,
}
现在在 YourGuard 中,您可以从本地存储或类似的东西中删除用户...