javascript - Angular - 根据操作显示/隐藏表单

Question

我正在使用 Angular 4 实现一个简单的登录/注册应用程序。我想要实现的是让默认 View 显示登录表单，并且只有当我单击注册链接时我才想显示注册表单，它必须替换登录表单。
现在我必须单击登录链接才能显示它。我将粘贴一些代码。

应用模块

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

应用组件模板

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

登录组件模板

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

注册组件模板

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

我是否缺少一些路由器模块设置？
提前致谢。

Answer 1

在您的路由中，您需要 redirect 用户访问登录页面(如果您希望将其作为默认 View )。因此请尝试以下操作:

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