如何在运行时更改根组件中的 Angular 个组件

Question

我想添加一个动态表单。按下配置按钮时，表单应从 app-login-form 更改为 login-config-form.

app.component.html

<div class="container p-5">
  <app-login-header></app-login-header>
  <div class="load-form">
    <login-config-form></login-config-form> 
    <app-login-form></app-login-form>
  </div>
</div>

app.component.ts

import {
  Component,
} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

}

Answer 1

类似

<div class="container p-5">
  <app-login-header></app-login-header>
  <div class="load-form">
    <button (click)="displayConfig = !displayConfig">Toggle</button>
    <login-config-form *ngIf="displayConfig"></login-config-form> 
    <app-login-form> *ngIf="!displayConfig"</app-login-form>
  </div>
</div>

TS:

//...
export class AppComponent {
   public displayConfig: boolean;
}

Answer 2

你能试试吗：

<div class="container p-5">
  <app-login-header></app-login-header>
  <div class="load-form">
    <button (click)="displayConfig = !displayConfig">Toggle</button>

    <!-- If is displayConfig then show login-config -->
    <ng-container *ngIf="displayConfig; else isLoginForm;">
      <login-config-form></login-config-form>
    </ng-container>

    <!-- else show isLoginForm -->
    <ng-template #isLoginForm>
      <app-login-form></app-login-form>
    </ng-template>


  </div>
</div>

如何在运行时更改根组件中的 Angular 个组件

How to change Angular components at runtime in root component

typescript

angular-components

angular