Angular 2 rc1 routerCanDeactivate

时间:2016-05-23 15:02:26

标签: angular

我正在使用rc1路由器的routerCanDeactivate方法。我们有一个用户搜索项目的视图,当他们选择一个项目时,我想与他们确认他们想要离开当前路线。我可以通过以下方式做到这一点:

routerCanDeactivate() {
    return confirm('Are you sure you want to leave this route');
}

将弹出一个javascript确认框,如果用户选择Yes,他们将离开当前路线并继续下一个路线,或者如果他们取消,他们会留在当前路线上。这很好用,我已经在应用程序的其他部分使用它了。

然而,我想在应用程序的某个部分上做的只是确认显示它们是否朝向特定路线。因此,例如,让我们说我有仪表板组件,项目详细信息组件和搜索组件。当用户在搜索组件中搜索项目并从列表中选择项目时,他们将转到“项目详细信息”组件。但我想在搜索组件停用之前与他们确认。但是,如果他们要访问仪表板,他们可以自由地去那里,而无需确认搜索组件停用。为了澄清代码,这里是我在Angular 2 beta.12中所做的:

routerCanDeactivate(next:ComponentInstruction, prev:ComponentInstruction) {
    if(next.componentType.name.toLowerCase () !== 'details') {
         return confirm('Are you sure you want to go to the details page?');
    } else {
        return true;
    }
}

我可以检查下一个组件的名称,如果我想显示确认对话框,请确定使用它。然而,在rc1路由器中,我还没有能够复制相同的功能。 rc1路由器中的routerCanDeactivate方法有两个可选参数:currentTree:RouteTreefutureTree:RouteTree。我试图挖掘未来的树,看看我是否可以找到一个可用的名称,或网址或任何东西,但是我们无法访问我需要的东西。我已经看到了我console.log这个组件的名称:futureTree._root.children[0].value,然后在控制台中我展开了_type属性(那里&# 39; name上的sa _type属性,但您似乎无法直接访问它。如果我尝试访问_typefutureTree._root.children[0].value._type,它会记录一个对我没有任何帮助的功能。

如果有人有任何想法如何检查下一个组件是什么,所以我可以有条件地显示确认对话框,那就太棒了!我很乐意帮忙!

谢谢!

0 个答案:

没有答案