Angular 2。如何防止路线改变

Question

我在 Angular 2 中有一个子组件，它处理特定级别之后的所有路由，该路由在父组件中定义为这样

@RouteConfig([
    { path: '/*other', name: 'Detail', component: DetailsViewComponent, useAsDefault: true },
])

现在，在详细信息 View 中，我想确保输入的 URL 有效，如果无效，则阻止更改。

使用 routerCanDeactivate 不起作用，因为仅当组件因路由更改而被删除时才会调用，而本实现中并非如此。

不幸的是，当查看API for Router时大多数 API 仍然缺少文档。

Answer 1

1.

您可以使用@CanActivate在您的子路由上，路由器将调用它来决定路由激活，从而决定路由更改。

用法:

import {checkValidUrl} from 'path/to/isUrlValid-service';

@Component({selector: 'control-panel-cmp', template: `<div>Settings: ...</div>`})

@CanActivate(){ //do your checking here and return true/false

    return checkValidUrl.isValid(document.url); 

    // isValid is your function to check the validity
}

class ChildComponent {
}

但是您必须对每个 child 执行此操作。

---

2.

如果您想要一次性解决方案，您可以创建自己的 <custom-router-outlet>

as Described and Implemented here