アクションでコンポーネントを起動できません

Question

コンポーネントに2つのボタンがあります。これらのボタンをクリックすると、2つの別々のコンポーネントを起動する必要がありますが、そうではありません。ボタンを含むコンポーネントは次のようになります。

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

とログインのみの接続コンポーネントが起動しました。私は間違いを犯していますか？

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

正常に動作する必要があります：に変更すると、上記の例では

Answer 1

。現在の方法は'/login/Signup'と'/login/login'のいずれのパスもRoutesで定義されています。