Question

使用router.navigateByUrl方法时，我目前在使用Angular2应用时遇到问题。我的组件中有一个名为goToRoute的函数，它看起来像这样：

router.goToRoute(route:string, event?:Event):void {
        if (event) {
            if (event.defaultPrevented) {
                return;
            }
            event.preventDefault();
        }

        this.router.navigateByUrl(route); // prefixing with '/' does nothing here...
        // if the menu has been clicked and it was open close it!
        if (this.menuOpen) {
            this.toggleHamburger();

} }

我会在我的HTML中的ngFor中使用它，就像这样......

<div *ngFor="let route of routes ">
    <div (click)="goToRoute(route.path, $event)"> {{ route.display }} </div>
</div>

现在，当我点击div时，我收到错误：

EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes: 'about-us'
zone.js:461 Unhandled Promise rejection: Cannot match any routes: 'about-us' ; Zone: angular ; Task: Promise.then ; Value: Error: Cannot match any routes: 'about-us'(…)consoleError @ zone.js:461_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
zone.js:463 Error: Uncaught (in promise): Error: Cannot match any routes: 'about-us'(…)

这很奇怪，因为在我的路线中我有以下内容（DisplayRoutes是我通过扩展Route对象制作的自定义类型）：

export const routes:DisplayRoutes = [
    {
        path: '',
        display: 'Home',
        component: HomeComponent
    }, {
        path: 'about-us',
        display: 'About us',
        component: LeftSubNavigation,
        index: {
            component: DetailMoreLayout
        },
        children: [
            {
                path: ':id',
                component: DetailMoreLayout
            }
        ]
    }, {
        path: 'teams',
        display: 'Teams',
        component: LeftSubNavigation,
        index: {
            component: DetailMoreLayout
        },
        children: [
            {
                path: ':id',
                component: DetailMoreLayout
            }
        ]
    }
];

正如你所看到的那样，我确实有一条名为“关于我们的路线”＃！出于某种原因，尽管名称匹配，但路径没有匹配？我在我的goToRoute方法中输入了一个控制台日志来输出route和event以查看传递的内容...我得到了这个......

about-us MouseEvent {isTrusted: true, screenX: 1809, screenY: 382, clientX: 42, clientY: 144…}

我目前正在从"@ngrx/router": "^1.0.0-beta.1"切换到"@angular/router": "3.0.0-beta.2"。我有一个基本标记，当我使用router.navigateByUrl时，事情似乎崩溃了。然后我注意到如果我进行深层链接会发生同样的情况，例如当我在浏览器中转到http://localhost:4200/about-us时。

感谢任何建议。

Answer 1

你必须有'/'前缀。

其次，由于约 - 我们是非终止路线（有孩子），您需要定义具有''(empty)路径的孩子。它可能会重定向到任何现有路线。

{path: '', redirectTo: 'other-path', pathMatch: 'full'}

其次我假设你的扩展将处理config中的display和index var，因为它在默认的Routes类型中不存在。

查看官方tutorial

详细说明如何使用multi level routing的另一个问题。

Angular2 EXCEPTION：错误：未捕获（在承诺中）：错误：无法匹配任何路由：

1 个答案: