angular2アプリケーションでの取り付け

Question

ログインボタンをクリックするとダッシュボードページにルーティングしようとしています。しかし、私はそれに行くことができません。私はログインコンポーネントとダッシュボードコンポーネントを持っています。私は成功したログインのダッシュボードページにルーティングしたいです。 ログインルーティングmodule.ts

const routes: Routes = [ 
    { 
       path: 'login', 
       component: LoginComponent, 
       data: { 
        title: 'Login Page' 
       } 
      }, 
      { 
       path: 'register', 
       component: RegisterComponent, 
       data: { 
        title: 'Register Page' 
       } 
      } 


]; 

@NgModule({ 
    imports: [RouterModule.forChild(routes)], 
    exports: [RouterModule] 
}) 
export class LoginRoutingModule {} 

これは私のログインhtmlファイルです。

<div class="app flex-row align-items-center"> 
    <div class="container"> 
    <div class="row justify-content-center"> 
     <div class="col-md-8"> 
     <div class="card-group mb-0"> 
      <div class="card p-2"> 
      <div class="card-block"> 
       <h1>Login</h1> 
       <p class="text-muted">Sign In to your account</p> 
       <div class="input-group mb-1"> 
           <span class="input-group-addon"><i class="icon-user"></i> 
           </span> 
       <input type="text" class="form-control" placeholder="Username"> 
       </div> 
       <div class="input-group mb-2"> 
           <span class="input-group-addon"><i class="icon-lock"></i> 
           </span> 
       <input type="password" class="form-control" placeholder="Password"> 
       </div> 
       <div class="row"> 
       <div class="col-6"> 
        <!-- 
        <button type="button" class="btn btn-primary px-2">Login</button> 
        !--> 
        <button (click)="OnTestLogin()">Login</button> 
        <p>Output:{{postData}}</p> 
       </div> 
       <div class="col-6 text-right"> 
        <button type="button" class="btn btn-link px-0">Forgot password?</button> 
       </div> 
       </div> 
      </div> 
      </div> 
      <div class="card card-inverse card-primary py-3 hidden-md-down" style="width:44%"> 
      <div class="card-block text-center"> 
       <div> 
       <h2>Sign up</h2> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
       <button type="button" class="btn btn-primary active mt-1">Register Now!</button> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

これは私が、角度やルーティングコンセプトに非常に新しいです

export const routes: Routes = [ 
    { 
    path: '', 
    component: LoginComponent 
    }, 
    { 
    path: '#/dashboard', 
    component: LoginComponent 
    }, 
    { 
    path: '', 
    component: FullLayoutComponent, 
    data: { 
     title: 'login' 
    }, 

    children: [ 
     { 
     path: 'login', 
     loadChildren: './login/login.module#LoginModule' 
     }, 
    ] 
    } 
]; 

@NgModule({ 
    imports: [ RouterModule.forRoot(routes) ], 
    exports: [ RouterModule ] 
}) 
export class AppRoutingModule {} 

私のアプリ-routing.tsファイルです。ログインが成功したら、ダッシュボードコンポーネントページにルーティングする手伝いをしてください。ログイン時に出力が成功していますが、ダッシュボードページにルーティングできません。

Answer 1

私のリポジトリをAngularで見ることができます。これは、ルーティングの概念を非常にうまくカバーしています。チェックした後にログインに成功するには、ガードを使用する必要があります。確認してルートを設定する。それもカバーされ、あなた自身を確認して助けてください。アンギュラ4.0.0の公式リリースの

リンク

https://github.com/rahulrsingh09/AngularConcepts/tree/master/src/app/guards

の作業例

https://rahulrsingh09.github.io/AngularConcepts/

Answer 2

、私の以前の作業経路のすべてがエラーで動作を停止パスにはスラッシュを付けることはできません。

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 

import { CustomerComponent } from './customer/customer.component'; 
import {PageNotFoundComponent} from './page-not-found/page-not-found.component'; 

const routes: Routes = [ 
    { 
    path: '/customer', 
    component: CustomerComponent 
    } 
    , 
    { 
    path: '', 
    pathMatch: 'full', 
    redirectTo: '/customer' 
    } 
    , 
    { 
    path: '**', 
    component: PageNotFoundComponent 
    } 
]; 

エラーを回避するために、これに変更する必要がありました：

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 

import { CustomerComponent } from './customer/customer.component'; 
import {PageNotFoundComponent} from './page-not-found/page-not-found.component'; 

const routes: Routes = [ 
    { 
    path: 'customer', 
    component: CustomerComponent 
    } 
    , 
    { 
    path: '', 
    pathMatch: 'full', 
    redirectTo: 'customer' 
    } 
    , 
    { 
    path: '**', 
    component: PageNotFoundComponent 
    } 
]; 

厄介な＃を使用しないようにするには、このように見えた私の以前の角度2.4.10コードがあることを意味

あなたのルートでは、app.module.tsを変更して、以下に示すように「プレーンパス」を指定することをお勧めします：

import { LocationStrategy, PathLocationStrategy} from '@angular/common'; 

とあなたの@NgModule宣言のプロバイダの一部は、この行を追加する必要があります

providers: [ 
    {provide: LocationStrategy, useClass: PathLocationStrategy} 
    ],