2

我对 Angular 2.0 很陌生（谁不是！？！？！），我无法让我的路由工作！我不断收到错误“ Component "LoginComponent" has no route config. in [['/Register'] in LoginComponent”。

这是从我的文件中获取的我@RouteConfig和引导代码（以证明我正在注入依赖项）boot.ts

bootstrap(LoginComponent, [
    ROUTER_PROVIDERS, HTTP_PROVIDERS
]);

@RouteConfig([
    {path: '/login', name: 'Login', component: LoginComponent, useAsDefault: true},
    {path: '/register', name: 'Register', component: RegisterComponent}
])

这是我的 LoginComponent 代码...来自我的login.component.ts文件

import {Component} from 'angular2/core';
import {FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators} from 'angular2/common';
import {RouteConfig,  ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from 'angular2/router';
import {Http, Headers, Response} from "angular2/http";

@Component({
    selector: 'login',
    templateUrl: 'app/login/login.component.html',
    directives: [FORM_DIRECTIVES, ROUTER_DIRECTIVES]
})

export class LoginComponent {

    loginForm:ControlGroup;
    http: Http;
    userNotFound: boolean;

    constructor(fb:FormBuilder, http: Http) {
        this.loginForm = fb.group({
            'email': ['', Validators.required],
            'password': ['', Validators.required]
        });

        this.http = http;
        this.userNotFound = false;
    }

    login(event: Event, val:string):void {
        // stuff happens here
    }

    forgotPassword() {
        // stuff happens here
    }
}

在我看来，我有一个指向我的应用程序不同部分的链接。取自我的login.component.html档案

<a (click)="forgotPassword()">Forgot Password</a>
<br>
<a [routerLink]="['/Register']">Register</a>
<br>
<div class="error" *ngIf="userNotFound">
   User not found. Please try again...
</div>

但是在浏览器中我收到以下错误：

例外：组件“LoginComponent”没有路由配置。在 [['/Register'] 在 LoginComponent@23:19]

原始异常：组件“LoginComponent”没有路由配置。

原始堆栈跟踪：错误：组件“LoginComponent”没有路由配置。

谁能看到问题到底是什么？在我介绍超链接之前，默认设置有效，一切都很好<a [routerLink]="['/Register']">Register</a>。我一直在努力解决这个问题！

这是我的项目结构（如果有帮助）...

项目结构

4

3 回答 3

1

实际上，我可以理解问题出在路由文件中，因为您是引导登录组件文件，并且您正在 boot.ts 文件中进行路由。但是您必须在 loginComponent 文件中进行路由，因为 angular2 在引导文件中找到路由，即在您的情况下是 boot.ts 但是当您编写

<a [routerLink]="['/Register']">Register</a>

这将在 login.component.ts 文件中查找路由。但找不到这是我认为的错误。其次是我认为的问题中没有提到的导入。

在 logincomponent 文件中使用您的父路由，我希望这会有所帮助。

于 2016-01-08T14:50:16.170 回答
0

我有一个类似的错误，也许如果你，移动这个代码

@RouteConfig([
    {path: '/login', name: 'Login', component: LoginComponent, useAsDefault: true},
    {path: '/register', name: 'Register', component: RegisterComponent}
])

在 LoginComponent 文件中。

import {Component} from 'angular2/core';
import {FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators} from 'angular2/common';
import {RouteConfig,  ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from 'angular2/router';
import {Http, Headers, Response} from "angular2/http";

@Component({
    selector: 'login',
    templateUrl: 'app/login/login.component.html',
    directives: [FORM_DIRECTIVES, ROUTER_DIRECTIVES]
})

export class LoginComponent {
..//

import {Component} from 'angular2/core';
    import {FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators} from 'angular2/common';
    import {RouteConfig,  ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from 'angular2/router';
    import {Http, Headers, Response} from "angular2/http";

    @RouteConfig([
    {path: '/login', name: 'Login', component: LoginComponent, useAsDefault: true},
    {path: '/register', name: 'Register', component: RegisterComponent}
    ])

    @Component({
        selector: 'login',
        templateUrl: 'app/login/login.component.html',
        directives: [FORM_DIRECTIVES, ROUTER_DIRECTIVES]
    })

    export class LoginComponent {
    ..//

我希望这对您有所帮助，并为我的英语不好感到抱歉。

于 2016-02-23T03:13:01.950 回答
0

嗨，可能有点晚了，但我认为问题可能是您的姓名参考不正确。链接应该如下删除正斜杠。

<a [routerLink]="['Register']">Register</a>
于 2016-08-31T19:13:54.313 回答