Визуализация другого компонента после отправки формы Angular

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