时间戳

首页 > 解决方案 > 如何在不更改 url 的情况下在另一个组件中路由组件？

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

问题描述

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

我的代码看起来是这样的。我只添加了选定文件中最重要的代码。

索引.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;
    }
  }

登录.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 的源代码。您能告诉我如何在单击忘记密码后切换组件 login.component.html 吗？或者没有帐户？到组件 forgot.component.html 或sign-up.component.html

标签： htmlangulartypescriptroutingbootstrap-4

解决方案

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>

推荐阅读