Question

点击登录按钮后，我有一个登录页面。它应该加载一个包含仪表板等内容的完整新屏幕。

互联网上给出的方法与此要求不匹配。

非常感谢任何帮助

请找到我写的代码。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { RouterModule, Routes } from '@angular/router';
import { AdminComponent } from '../app/admin/admin.component';
import { LoginComponent } from '../app/login/login.component';
import { AuthGuard } from './auth-guard.service';

const appRoutes: Routes = [
  { path: '', component: LoginComponent },
  { path: '', canActivate: [AuthGuard], canActivateChild: [AuthGuard], children: [
    { path: 'admin', component: AdminComponent }
  ]}
];


@NgModule({
  declarations: [
    AppComponent,
    AdminComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes, {enableTracing: false})
  ],
  providers: [],

  bootstrap: [LoginComponent]
})
export class AppModule { }

单击“在登录”组件中，将调用以下方法

signIn() {
     this.router.navigateByUrl('/admin');
  }

Auth guard Service

import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';

@Injectable()
export class AuthGuard implements CanActivate {
  canActivate() {
    console.log('AuthGuard#canActivate called');
    return true;
  }
}

Answer 1

我非常确定互联网上给出的方法是否符合此要求:)

它被称为路由：你需要做的基本上是：

创建您的登录组件
登录后，当您收到回复时，会重定向到另一个组件。

首先，您的登录组件。执行HTML表单，并在验证时调用您的端点。收到回复后，您需要使用此

constructor(private router: Router) {} // from @angular/router
// Upon response do 
thismyService.login(username, pwd).subscribe(response => {
  this.router.navigate(['connected']);
});

现在，您必须定义路线。它看起来像这样：

const routes: Routes = [
  { path: '', component: LoginComponent },
  { path: '', canActivate: [AuthGuard], canActivateChild: [AuthGuard], children: [
    { path: 'connected', component: ConnectedComponent }
  ]}
];

简单明了：

您有默认的登录组件
您的所有其他路线都在一个有警卫的小组中（AuthGuard）。如果你不知道什么是警卫，see this page。如果您未连接，则无法访问这些路由。

没有进一步的代码，这是我能得到的所有帮助。所以我希望它有所帮助！

编辑抱歉我做错了，你的路线应该是这个

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: '', canActivate: [AuthGuard], canActivateChild: [AuthGuard], children: [
    { path: 'connected', component: ConnectedComponent }
  ]},
  { path: '**', redirectTo: 'login', pathMatch: 'full' }
];

你有两条相同的路线（空路径），现在你有一个登录路线，如果路线没有被识别，它将重定向到登录

如何在单击Angular5中的按钮时显示一个全新的组件

1 个答案: