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

【问题标题】：How can I route components in another component without changing url?如何在不更改 url 的情况下在另一个组件中路由组件？
【发布时间】：2018-10-09 00:10:38
【问题描述】：

假设我有带有路由的 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? 时，他不会被路由到带有localhost:4200/sign-up 之类的网址的另一个页面，但他将留在带有网址localhost:4200 和字段username, password, sign in, forgot password? 和@987654335 的同一页面上@ 将消失，取而代之的是与注册相关的字段。我不确定你是否明白我的意思。我想要实现的一个很好的例子是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;
    }
  }

<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

【问题讨论】：

您可以使用标志在显示的组件之间切换吗？当用户单击按钮时，更改标志并使用*ngIf 仅显示您想要的组件/字段。
@SimplyGed 你能举个例子吗？
参见例如angular.io/api/router/NavigationExtras#skipLocationChange

标签： html angular typescript routing bootstrap-4

【解决方案1】：

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

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

【讨论】：

但问题是我已经分离了组件，所以我需要让全局变量对所有三个组件都可见。我该如何解决这个问题？
该变量仅在HomeComponent 中公开，因此它不是全局变量。您可以通过仅返回变量来简化您的方法，例如return this.isSignin; 你仍然缺少一个按钮和方法来更改变量以显示正确的组件。
我在问题中添加了sign-in.component.html的源代码。您能告诉我如何在单击Forgot Password? 或Do not have an account? 后将组件sign-in.component.html 切换到组件forgot.component.html 或`sign-up.component.html`

【解决方案2】：

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

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

【讨论】：

路由后不更改 url 会有所帮助，但是如何按照问题中描述的方式更改组件？