根据 Angular 8 中的某些条件，hide/show 组件的最佳方法是什么

Question

伙计们，谢谢你们的帮助。在获得大量建议并混合并匹配所有这些建议代码后，我能够解决之前的问题。但是，在控制台中使用 @ViewChild 装饰器后出现以下错误。

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'count1'. Current value: 'count2'.

我的父 ts 文件代码如下

import { Component, OnInit, Input, ViewEncapsulation, ViewChild, AfterViewInit} from '@angular/core';
import { NagivationComponent } from '../nagivation/nagivation.component';
import { CensusComponent } from '../your-data/census/census.component';
import { ApplicationComponent } from '../your-data/application/application.component';

@Component({
  selector: 'app-your-data',
  templateUrl: './your-data.component.html',
  styleUrls: ['./your-data.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class YourDataComponent implements AfterViewInit{
  @Input() step;

  count:string = 'count1';
  constructor() {

  }
  @ViewChild(CensusComponent, {static: false}) census: CensusComponent;
  ngAfterViewInit() {
    this.count = this.census.getSection(); 
  }      
}

您的data.component.html代码如下

<div [ngSwitch]="count">
   <app-census *ngSwitchCase="'count1'"></app-census>
   <app-application *ngSwitchCase="'count2'"></app-application>
</div>

Answer 1

只需使用 ngIf 并在条件下使用计数，点击下一步按钮时计数会增加

<div class='container'>
  <div class='row'>
    <div class='setup-content'>
      <h1>Confirm Data/Answer Questions</h1>
      <p>Please answer all questions below. If you have questions about the data provided on this screen, please contact << Broker >> at << Phone >> or << Email >>.</p>
      <app-census *ngIf="count === 1"></app-census>
      <app-census1 *ngIf="count === 2"></app-census1>
    </div>
  </div>
</div>

Answer 2

使用*ngIf根据步骤显示组件，尝试：

<div class='container'>
  <div class='row'>
    <div class='setup-content'>
      <h1>Confirm Data/Answer Questions</h1>
      <p>Please answer all questions below. If you have questions about the data provided on this screen, please contact << Broker >> at << Phone >> or << Email >>.</p>
      <app-census *ngIf="step == 1"></app-census>
      <app-census1 *ngIf="step == 2"></app-census1>
    </div>
  </div>
</div>

Answer 3

当您有两个以上的步骤时，您可以使用 *ngSwitch 和 *ngSwitchCase 来获得更简洁的方法：

<div class='container'>
  <div class='row'>
    <div class='setup-content'>
      <h1>Confirm Data/Answer Questions</h1>
      <p>Please answer all questions below. If you have questions about the data provided on this screen, please contact << Broker >> at << Phone >> or << Email >>.</p>
      <ng-container [ngSwitch]="count">
          <app-census *ngSwitchCase="1"></app-census>
          <app-census1 *ngSwitchCase="2"></app-census1>
      </ng-container>
    </div>
  </div>
</div>

Answer 4

您可以使用 *ngIf or *ngSwitchCase 指令根据条件显示组件。

模板：

<div [ngSwitch]="step">
  <div *ngSwitchCase="'step1'"><app-census1></app-census1></div>
  <div *ngSwitchCase="'step2'"><app-census2></app-census2></div>
  <div *ngSwitchCase="'step3'"><app-census3></app-census3></div>
  <div *ngSwitchCase="'step4'"><app-census4></app-census4></div>
  <div *ngSwitchDefault>Default</div>
</div>

组件

import { Component, OnInit, Input, ViewEncapsulation } from '@angular/core';
import { NagivationComponent } from '../nagivation/nagivation.component';

@Component({
  selector: 'app-your-data',
  templateUrl: './your-data.component.html',
  styleUrls: ['./your-data.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class YourDataComponent implements OnInit {
  @Input() step;
  count:number;
  step: string;

  constructor() { }

  ngOnInit() {
    // here set this.step = 'step1' | 'step2' | 'step3' | 'step4'      
  }
}

对于基于步进器的应用程序，您可以参考 here 示例应用程序。在该应用程序中启用线性模式将确保您需要输入一些数据才能继续下一步。

Answer 5

您可以使用 *ngTemplateOutlet 来显示基于计数变量的组件。

 <div class='container'>
          <div class='row'>
            <div class='setup-content'>
              <h1>Confirm Data/Answer Questions</h1>
              <p>Please answer all questions below. If you have questions about the data provided on this screen, please contact << Broker >> at << Phone >> or << Email >>.</p>
           <div *ngif="count == 1"> 
 <app-census></app-census>
<ng-container *ngTemplateOutlet="template"></ng-container>
           </div>
         <div *ngif="count == 2"> 
 <app-census1></app-census1>
<ng-container *ngTemplateOutlet="template"></ng-container>
           </div>
            </div>
          </div>
        </div>

    <ng-template #template>
      <router-outlet>
      </router-outlet>
    </ng-template>

Answer 6

上述问题已解决，可以将模式从开发模式更改为生产模式。在 main.ts

enableProdMode();

请删除 if 条件。下面是我的全部解决代码

父组件 .html 文件

<div [ngSwitch]=count>
      <app-census *ngSwitchCase="'count1'"></app-census>
      <app-application *ngSwitchCase="'count2'"></app-application>
   </div>

父组件文件

import { Component, OnInit, Input, ViewEncapsulation, ViewChild, AfterViewInit} from '@angular/core';
import { NagivationComponent } from '../nagivation/nagivation.component';
import { CensusComponent } from '../your-data/census/census.component';
import { ApplicationComponent } from '../your-data/application/application.component';

@Component({
  selector: 'app-your-data',
  templateUrl: './your-data.component.html',
  styleUrls: ['./your-data.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class YourDataComponent implements AfterViewInit{
  @Input() step;

  count:string = 'count1';
  constructor() {

  }
  @ViewChild(CensusComponent, {static: false}) census: CensusComponent;
  ngAfterViewInit() {
    this.count = this.census.getSection(); 
  }

}

子组件html

<button class="sub btn btn-primary btn-lg nbtn" type="button" (click)="getSection()"><span>NEXT</span></button>

子组件文件

import { Component, OnInit, Input } from '@angular/core';
import { YourDataComponent } from '../your-data.component';
@Component({
  selector: 'app-census',
  templateUrl: './census.component.html',
  styleUrls: ['./census.component.css']
})
export class CensusComponent implements OnInit {
  @Input() count:string;
  getSection(){
    this.count = 'count2';
    return this.count;
  }
  constructor() {

  }

  ngOnInit(): void {
  }

}

根据 Angular 8 中的某些条件，hide/show 组件的最佳方法是什么

What is the best approach to hide/show component depending on some condition in Angular 8

angular-services

angular-components

angular