Question

我在组件中有两个按钮。单击这些按钮后，应启动两个单独的组件，但情况并非如此。包含按钮的组件如下所示。

HTML：

      <button class="btns" md-button (click)="goToConnect('Signup')">Sign Up</button>

      <button class="btns" md-button (click)="goToLogin('Login')">Log In</button>

  <router-outlet></router-outlet>

和.ts文件lloks这样：

import { Component, OnInit } from '@angular/core';
import { Router }            from '@angular/router';

@Component({
  selector: 'app-landing-page',
  templateUrl: './landing-page.component.html',
  styleUrls: ['./landing-page.component.scss']
})
export class LandingPageComponent implements OnInit {

  constructor(private router: Router) { }

  goToConnect(title: string): void {
    this.router.navigate(['/connect', title]);
  }
  goToLogin(title: string): void {
    this.router.navigate(['/login', title]);
  }

  ngOnInit() {
  }

}

我的模块路由器如下所示：

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

import { ConnectComponent } from './components/connect/connect.component';
import { VerifyComponent } from './components/verify/verify.component';
import { LandingPageComponent } from './components/landing-page/landing-page.component';
import { SelectSignatureComponent } from './components/select-signature/select-signature.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { CreateDocComponent } from './components/dashboard/create-doc/create-doc.component';
import { LoginComponent } from './components/login/login.component';
import { AuthGaurd } from './_gaurds/auth.gaurd';

const routes: Routes = [
  //{ path: '', redirectTo: '/connect', pathMatch: 'full' },
  { path: '', component: LandingPageComponent },
  { path: 'login',  component: LoginComponent, pathMatch: 'full'},
  { path: 'connect',  component: ConnectComponent, pathMatch: 'full'},
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGaurd]},
  { path: '**', redirectTo: 'dashboard'}
];

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

点击两个按钮，即仅注册和登录连接组件已启动。任何想法我在哪里犯错？

Answer 1

在上面的示例中，更改为：

vkQueueSubmit

应该可以正常工作。您当前的方法会转到路径goToConnect(title: string): void { this.router.navigate(['connect']); } goToLogin(title: string): void { this.router.navigate(['login']); }和'/login/Signup'，这两条路径都未在'/login/login'中定义。

组件无法在操作中启动

1 个答案: