Question

我正在创建一个简单的Angular应用。现在只有AppComponent使用了其他三个组件：

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

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

Answer 1

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

以下是表单组件中的事件发射器的示例，用于指示表单何时发送。

应用程序组件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();
   }
}

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

1 个答案: