Question

我正在尝试通过单击登录按钮路由到仪表板页面。但是我无法前往它。我有一个登录组件和仪表板组件。我想在成功登录时路由到仪表板页面。登录路由模块.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>

这是我的app-routing.ts文件

 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 {}

我对角度和路由概念很新。请帮我成功登录后转到仪表板组件页面。我在登录时获得了输出成功但无法路由到仪表板页面。

Answer 1

您可以在Angular上查看我的存储库。它很好地涵盖了路由概念。为了您在检查后成功登录，您必须使用警卫。检查和路线。这也包括在内，请检查并帮助自己。

链接

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

工作示例

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

Answer 2

从Angular 4.0.0的官方版本开始，我以前工作的所有路由都停止了处理错误，该错误表明路径不能有前导斜杠。

这意味着我以前的Angular 2.4.10代码看起来像这样：

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
  }
];

为了避免在您的路线中使用那些令人讨厌的＃，我建议您更改app.module.ts以指定您想要“普通路径”，如下所示：

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

并且@NgModule声明的提供者部分应该添加以下行：

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

在angular2应用中进行计数

2 个答案: