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'] in LoginComponent@23:19]

元の例外: コンポーネント "LoginComponent" にはルート構成がありません。

元のスタックトレース: エラー: コンポーネント "LoginComponent" にはルート構成がありません。

誰が問題が正確に何であるかを見ることができますか? <a [routerLink]="['/Register']">Register</a>デフォルトで機能し、ハイパーリンクを導入するまではすべて問題ありません。私はしばらくこれを解決しようとしてきました！

これが私のプロジェクト構造です（役立つ場合）...

プロジェクト構造

4

3 に答える 3

1

ログインコンポーネントファイルをブートストラップし、boot.tsファイルでルーティングを行っているため、実際にはルーティングファイルに問題があることを理解できます。ただし、angular2はブートストラップされたファイルでルーティングを見つけるため、代わりにloginComponentファイルでルーティングを行う必要があります。つまり、あなたの場合は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 に答える