Angular 提交表单后呈现不同的组件

我正在创建一个简单的角度应用程序。目前只有AppComponent使用了其他三个组件：

<div>
           <component-one></component-one>
            <component-two>component-two>
                  <contact-form></contact-form>
     </div>

---

我的问题是如何在提交时加载一个新组件来代替联系人表单？

一个简单的解决方案是在应用程序组件中定义一个跟踪表单的变量，并使用此变量显示一个或另一个组件

下面是一个示例，其中包含来自表单组件的事件发射器，用于指示表单何时被发送

应用程序组件ts：

export class AppComponent {
    isFormSent = false;

    onFormSent () {
       isFormSent = true;
    }
}

应用程序组件html：

<contact-form (formSent)="onFormSent()" *ngIf="!isFormSent">
<component-to-display-when-form-sent *ngIf="isFormSent"></component-to-display-when-form-sent>

联络表格ts：

export class FormComponent {
    @Output() formSent: EventEmitter<void> = new EventEmitter();

   sendForm () {
      // Send your form
      this.formSent.emit();
   }
}

---

完美的正是我需要的。