Question

让我们假设我有Angular 5项目的路线。例如/home, /landing-page, etc。此外，让我们假设在我的登录页面中使用网址 - localhost:4200。我想创建登录面板。我有两个字段 - username和password，一个按钮sign in以及另外两个按钮forgot password?和Don't have an account?。我的问题是，当用户点击Forgot password?或Don't have an account?时，他将不会被路由到其他网址，其网址为localhost:4200/sign-up，但他会与网址localhost:4200保持同一页面字段username, password, sign in, forgot password?和Don't have an account?将消失，并在其位置显示与注册相关联的字段。我不确定你是否知道我的意思。我想要实现的好例子是https://www.instagram.com。无论您是单击“注册”还是“登录”，您仍然在同一个URL上，并且只有一个组件发生更改。你知道我怎么能做到这一点？我不确定我是否应该使用路线或者其他方式可能更适合这样做？提前谢谢。

我的代码以这种方式看待。我只添加了所选文件中最重要的代码。

的index.html：

</head>
<body>
<app-root></app-root>
</body>
</html>

app.component.html：

<app-navbar></app-navbar>
<router-outlet></router-outlet>
<app-footer *ngIf="removeFooter()"></app-footer>

目前，home.component以这种方式看待：

home.component.html：

<div *ngIf="isSignIn()">
  <app-sign-in></app-sign-in>
</div>

<div *ngIf="isSignUp()">
  <app-sign-up></app-sign-up>
</div>

<div *ngIf="isForgotPassword()">
  <app-forgot-password></app-forgot-password>
</div>

home.component.ts：

    constructor() {
      this.signin = true;
      this.signup = false;
      this.forgot = false;
    }

  isSignUp() {
    if (this.signup === true) {
      return true;
    }
    else {
      return false;
    }
  }

  isSignIn() {
    if (this.signin === true) {
      return true;
    }
    else {
      return false;
    }
  }

  isForgotPassword() {
    if (this.forgot === true) {
      return true;
    }
    else {
      return false;
    }
  }

登录in.component.html：

<div class="content-center">
  <div class="container">

    <div class="title-brand">

      <div align="center">

        <input style="background-color: black; border-color: white; color:white; width: 270px" type="text" value="" class="form-control" placeholder="USERNAME">

        <br>

        <input style="background-color: black; border-color: white; color:white; width: 270px" type="text" value="" class="form-control" placeholder="PASSWORD">

        <div class="row">
          <div class="col-md-8">
            <br>
            <button style="background-color: black; border-color: white; color:white; width: 270px" type="button"  class="btn btn-danger">Log in</button>
          </div>
        </div>

        <br>

        <h6  style = "color: white" [routerLink]="['/main']" skipLocationChange class=pointer>Forgot Password?</h6>
        <h6 style="color: white" [routerLink]="['/sign-up']" class=pointer>Don't have an account?</h6>

      </div>
    </div>
  </div>
</div>

更新我在这个问题中添加了sign-in.component.html的源代码。你能告诉我如何在点击忘记密码后切换组件sign-in.component.html吗？或者没有帐户？到组件forgot.component.html或sign-up.component.html

Answer 1

使用路线skipLocationChange中的NavigationExtras。例如。

<h6  style = "color: white" [routerLink]="['/main']" skipLocationChange>Forgot Password?</h6>
<h6 style="color: white" [routerLink]="['/sign-up']" skipLocationChange>Don't have an account?</h6>

Answer 2

以下是使用布尔和按钮的示例，允许您在单个页面上的不同组件之间切换：

stackblitz example

这个例子可以改进，但我希望它能告诉你如何轻松交换可见组件。

您可以在this link

查看代码

修改

您需要删除要显示的容器组件（即父组件）的责任。在更新的stackblitz example中，我让HomeComponent负责显示正确的组件。这意味着SignUp/SignIn/ForgotPassword组件不负责相互之间的切换 - 这是HomeComponent（或者您希望用于该作业的任何组件）的工作。

希望有所帮助

home.component.ts

import { Component } from '@angular/core'; @Component({ selector: 'app-home', template: `<div *ngIf="signin"> <app-sign-in></app-sign-in> <button (click)="showSignUp()">Sign up</button> <button (click)="showForgot()">Forgot password</button> </div> <div *ngIf="signup"> <app-sign-up></app-sign-up> <button (click)="showSignIn()">Sign in</button> <button (click)="showForgot()">Forgot password</button> </div> <div *ngIf="forgot"> <app-forgot-password></app-forgot-password> <button (click)="showSignUp()">Sign up</button> <button (click)="showSignIn()">Sign in</button> </div>`, styles: [`h1 { font-family: Lato; }`] }) export class HomeComponent { public signup: boolean = true; public signin: boolean = false; public forgot: boolean = false; constructor() {} public showSignIn() { this.signin = true; this.signup = this.forgot = false; } public showSignUp() { this.signup = true; this.signin = this.forgot = false; } public showForgot() { this.forgot = true; this.signin = this.signup = false; } }

如何在不更改URL的情况下在另一个组件中路由组件？

2 个答案: