Question

我的代码看起来如下所示。我只添加了所选文件中最重要的代码。在点击sign-in.component.html或Forgot Password?到组件Do not have an account?或forgot.component.html后，您能否告诉我如何切换组件sign-up.component.html?最重要的是切换组件取代前一个。所以我不想在点击按钮后转到另一个页面。我只是想将页面中嵌入的一个组件更改为另一个组件。

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

Answer 1

我不确定你为什么不想使用路线，因为它们只是为了做到这一点。

但是如果您已经开始动态执行此操作，那么我建议您查看文档： https://angular.io/guide/dynamic-component-loader

如何切换组件代替前一个组件？

1 个答案: