Question

我正在编写一个Angular应用，其中包含登录表单和注册表单。我想要的是，当我从一个视图切换到另一个视图时，前一个视图消失，仅显示实际的视图内容。现在所有的观点都显示在另一个之下。
我感觉到某些routing设置可能出错了谁能给我一个暗示？
感谢。

应用模块

[...some imports...]

@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">
      <login-form></login-form>
      <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>
  <button>Login</button>
  <span>{{message}}</span>
</form>
<button (click)="goToRegister()">Registrati</button>

登录组件

[...some imports...]
export class LoginComponent {
  private message = '';

  constructor(
    private userService: UserService,
    private router: Router
  ){}

  goToRegister(): void{
    this.router.navigate(['register']);
  }

  onSubmit(loginForm: NgForm): string {
    if (this.userService.login(
      loginForm.value.username,
      loginForm.value.password
    )) {
      this.router.navigate(['home']);
    }
    else {
      this.message = 'Login failed, please retry';
      return this.message;
    }
  }
}

注册组件模板

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

注册组件

[...some imports...]
export class RegisterComponent {

  constructor(
    private userService: UserService
  ){}

  onSubmit(registerForm: NgForm): boolean{

    var user = new User();
    user.name = registerForm.value.name;
    user.lastName = registerForm.value.lastName;
    user.username = registerForm.value.username;
    user.password = registerForm.value.password;

    return this.userService.create(user);
  }
}

Answer 1

从您的App模板中删除<login-form></login-form>，让<router-outlet></router-outlet>处理页面转换。

Answer 2

<div id="container">
  <div id="parent">
    <div id="left"></div>
    <div id="right">
      <login-form></login-form> // remove this line . The router-outlet will handle all page transitions
      <router-outlet></router-outlet>
    </div>
  </div>
</div>

Answer 3

<login-form></login-form>不需要，<router-outlet></router-outlet>用于在组件/路线之间切换，请参阅以下内容：

<div id="container">
  <div id="parent">
    <div id="left"></div>
    <div id="right">
      <router-outlet></router-outlet>
    </div>
  </div>
</div>

Angular4 - 浏览下一个视图时删除上一个视图

3 个答案: