Angular - show/hide form basierend auf der Aktion

Question

Ich implementiere eine einfache Login/Registrierung App mit Angular 4. Was ich erreichen möchte, ist die Standardansicht, die das Login-Formular anzeigt, und nur wenn ich auf ein Register Link klicke, möchte ich das Registrierungsformular anzeigen, das das Login-Formular ersetzen muss.
Jetzt muss ich auf den Login Link klicken, um es anzuzeigen. Ich werde etwas Code einfügen.

App Modul

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { RouterModule } from '@angular/router'; 

import { AppComponent } from './components/app/app.component'; 
import { LoginComponent } from './components/login/login.component'; 
import { RegisterComponent } from './components/register/register.component'; 
import { HomeComponent } from './components/home/home.component'; 
import { UserService } from './services/user/user.service'; 
import { User } from './services/user/user'; 

@NgModule({ 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    RouterModule.forRoot([ 
     { 
     path: 'login', 
     component: LoginComponent 
     }, 
     { 
     path: 'register', 
     component: RegisterComponent 
     }, 
     { 
     path: 'home', 
     component: HomeComponent 
     } 
    ]) 
    ], 
    declarations: [ 
    AppComponent, 
    LoginComponent, 
    RegisterComponent, 
    HomeComponent 
    ], 
    providers: [UserService, User], 
    bootstrap: [AppComponent] 
}) 

export class AppModule { } 

App Component Template

<div id="container"> 
    <div id="parent"> 
    <div id="left"></div> 
    <div id="right"> 
     <nav> 
     <a routerLink="/login" routerLinkActive="active">Login</a> 
     <a routerLink="/register" routerLinkActive="active">Register</a> 
     </nav> 
     <router-outlet></router-outlet> 
    </div> 
    </div> 
</div> 

Anmeldung Component Template

<form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm)"> 
    <div> 
    <label for="username">Username</label> 
    <input id="username" name="username" ngModel #username="ngModel"> 
    </div> 
    <div> 
    <label for="password">Password</label> 
    <input id="password" name="password" ngModel #password="ngModel"> 
    </div> 
    <span *ngIf="onSubmit(loginForm)">true</span> 
    <button>Login</button> 
</form> 

Register Component Template

<form #registerForm="ngForm" (ngSubmit)="onSubmit(registerForm)"> 
    <div> 
    <label for="name">Nome</label> 
    <input id="name" name="name" ngModel #name="ngModel"> 
    </div> 
    <div> 
    <label for="lastName">Cognome</label> 
    <input id="lastName" name="lastName" ngModel #lastName="ngModel"> 
    </div> 
    <div> 
    <label for="username">Username</label> 
    <input id="username" name="username" ngModel #username="ngModel"> 
    </div> 
    <div> 
    <label for="password">Password</label> 
    <input id="password" name="password" ngModel #password="ngModel"> 
    </div> 
    <div> 
    <label for="passwordRep">Ripeti la password</label> 
    <input id="passwordRep" name="passwordRep"> 
    </div> 
    <button>Registrati</button> 
</form> 

Gibt es eine Einstellung, die ich Router Module fehlt bin?
Vielen Dank im Voraus.

Answer 1

In Ihrem Routing müssen Sie redirect den Benutzer auf die login Seite, wenn Sie es als Standardansicht möchten. Also versuchen Sie folgendes:

RouterModule.forRoot([ 
    { 
    path: '', 
    redirectTo: 'login', 
    pathMatch: 'full' 
    }, 
    { 
    path: 'login', 
    component: LoginComponent 
    }, 
    { 
    path: 'register', 
    component: RegisterComponent 
    }, 
    { 
    path: 'home', 
    component: HomeComponent 
    } 
])