Javascript 在两个不同的组件之间显示和隐藏

我有

父组件

和两个不同的

子组件

，

查询表单

和

查询响应

，我得到了需要根据条件隐藏和显示这两个组件的情况：

• 如果用户在

  查询表单

  上单击了

  提交

  ，它将隐藏

  查询表单

  组件并显示

  查询响应

  组件
• 在

  inquiryResponse

  组件上，有

  按钮
  显示查询表单
  ，用户点击后将隐藏
  inquiryResponse
  组件和显示
  inquiryForm
  我无法解决此问题。

• 我知道它可以用

  路由器解决

  ，但我想要不同的解决方案，比如使用

  服务

  或

  主题

这是我使用创建的演示，这是我尝试过的

查询响应。ts

  getReceivedSummons() {
    this.inquiryStore.summons$.subscribe(result => {
      this.receivedSummon = result;
      this.addCheckboxes();
      this.isShowResponse = true;
    });
  }

    showInquiryForm() {
    // do something
    }

查询响应.html

<div *ngIf="isShowResponse">
  <p>Inquiry Response</p>
  <form [formGroup]="form" (ngSubmit)="submitSelectedCheckboxes()">
  <ng-container formArrayName="receivedSummons" *ngFor="let summon of formReceivedSummons.controls; let i = index">
    <ng-container [formGroup]="summon">
      <ng-container formArrayName="items" *ngFor="let item of formReceivedSummonsItems(i).controls; let j = index">
        <ng-container [formGroup]="item">
          <input type="checkbox" formControlName="isChecked"> {{item.value.name}}
        </ng-container>
      </ng-container>
    </ng-container>
    <div *ngIf="!summon.valid">At least one order must be selected</div>
  </ng-container>
  <br>
  <span class="button">
  <button [disabled]="!form.valid">submit</button>
  </span>
  <button (click)="showInquiryForm()"> ( change ID number ) display inquiry form</button>
</form>
</div>

询问答复

{{item.value.name}
必须至少选择一个订单


提交
（更改身份证号码）显示查询表

正如AJT_82所说，您的应用程序组件可以是

<app-inquiry-form *ngIf="step==1" (submit)="step=2"></app-inquiry-form>
<br>
<app-inquiry-response *ngIf="step==2" (click)="step=1"></app-inquiry-response>

//you has a variable
step:number=1;

//你有一个变量
步骤：编号=1；

在每个组件中

  @Output() submit=new EventEmitter<any>()
  ..in somewhere...
  this.submit.emit()

  @Output() click=new EventEmitter<any>()
  ..in somewhere...
  this.click.emit()

@Output（）submit=neweventemitter（）
…在某处。。。
this.submit.emit（）
@Output（）单击=新建EventEmitter（）
…在某处。。。
这个。单击。发射（）

为什么不使用

*ngIf

？在父级上使用ngIf，在应该隐藏组件时，使用

@Output（）

在子级与父级之间进行通信：