根据Angular 8中的某些条件，隐藏/显示组件的最佳方法是什么

伙计们，谢谢你们的帮助。在得到大量建议并混合和匹配所有建议的代码后，我能够解决前面的问题。然而，在控制台中使用@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(); 
  }      
}

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

下面是your-data.component.html代码

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

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

---

只需使用ngIf和在条件下使用计数，单击“下一步”按钮将增加该计数

确认数据/回答问题
请回答以下所有问题。如果您对此屏幕上提供的数据有疑问，请通过>或>联系>

使用

*ngIf

根据步骤显示组件， 尝试：

确认数据/回答问题
请回答以下所有问题。如果您对此屏幕上提供的数据有疑问，请通过>或>联系>

当您有两个以上的步骤时，您可以使用

*ngSwitch

和

*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>

---

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

您可以使用*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>

确认数据/回答问题
请回答以下所有问题。如果您对此屏幕上提供的数据有疑问，请通过>或>联系>

上述问题已得到解决，可将开发模式更改为生产模式。 主要是

enableProdMode();

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

父组件.html文件

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

子组件html

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

---

你试过*ngIf吗？我需要在哪里使用*ngIf？这是否回答了你的问题？获取以下内容无法绑定到“ngif”，因为它不是“app census”的已知属性*ngIf只接受布尔值。这里我需要检查一个条件。@PiyaliGhosh您需要添加到app.module或声明组件的模块中。下面是错误src/app/your data/your data.component.html:7:36-错误TS2551:类型“YourDataComponent”上不存在属性“count1”。你是说“伯爵”吗？7~~~~~您必须将其设置为*ngSwitchCase=“1”，而不是*ngSwitchCase=“count1”。此问题已解决。然而，出现了另一个问题。在使用ViewChild并相应地更新DOM后，我发现以下错误。core.js:5845错误：ExpressionChangedTerithasBeenCheckedError:表达式在检查后已更改。上一个值：“count1”。当前值：“count2”。@PiyaliGhosh这是因为您正在更新lifaecycle hook、ngOnInit、ngOnChanges等中的计数值。获取以下错误src/app/your data/your data.component.ts:18:29-错误TS2363：算术运算的右侧必须是“any”、“number”、“bigint”或枚举类型。18 this.count='count1'|'count2'|'count3'|'count4'您需要根据所执行的步骤设置此步骤的值。例如，如果您在步骤1中，则设置

this.Step='step1'。这将显示组件
。然后，当您转到步骤2时，设置
this.Step='step2'。这将显示
等等
this.step='step1'|'step2'|'step3'|'step4'
应该是一个占位符，告诉你这个.step
可以取什么值。另外
this.count='count1'|'count2'|'count3'|'count4'
来自另一个答案。我使用变量
执行此步骤。
<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 {
  }

}