Как получить доступ к форме в дочернем компоненте из родительского компонента в angular 6?

Question

Моя проблема в том, что у меня есть родительский компонент и много дочерних компонентов для моего родительского компонента. Родительский компонент не имеет формы, а дочерние компоненты имеют формы. Все дочерние компоненты совместно используют один и тот же маршрут родительского компонента и дочернего компонента.У меня нет никакой роутер-ссылки для уникальной идентификации. Поэтому задача состоит в том, чтобы отображать всплывающее окно, когда форма грязная и пользователь уходит с этой страницы. Так что я реализовал can-deactivate guard.Soмогу ли я дать возможность деактивировать дочерние компоненты (у дочерних компонентов bcz нет пути к маршрутизатору).Как мне достичь этого?

Может ли кто-нибудь помочь мне с этим? Борьба за последние два дня :( Любое другое решение также хорошо, Hugeee, спасибо заранее

can-deactivate-guard.ts:

import {ComponentCanDeactivate} from './component-can-deactivate';

@Injectable()
export class CanDeactivateGuard implements CanDeactivate<ComponentCanDeactivate> {
  canDeactivate(component: ComponentCanDeactivate): boolean {

    if(!component.canDeactivate()){
        if (confirm("You have unsaved changes! If you leave, your changes will be lost.")) {
            return true;
        } else {
            return false;
        }
    }
    return true;
  }
}

component-can-deactivate.ts:

export abstract class ComponentCanDeactivate {
 abstract  canDeactivate(): boolean;
@HostListener('window:beforeunload', ['$event'])
    unloadNotification($event: any) {
        if (!this.canDeactivate()) {
            $event.returnValue =true;
        }
    }
}

form-can-deactivate.ts:

export abstract class FormCanDeactivate extends ComponentCanDeactivate{

 abstract get form():NgForm;

 canDeactivate():boolean{
      return this.form.submitted || !this.form.dirty
  }
}

parent component.html: Нетформы в ParentComponent.html

<child1>some actions</child1>
<child2>some actions</child2>

и т. д. child1.component.html:

<form #form="ngForm">some fields</form>

app-routing.module.ts:

routes={path:':parent/somepath',component:ParentComponent,canDeactivate:[CanDeactivateGuard]}

Answer 1

, если вы загружаете другой component в контейнер без изменения URL-адресов, и вам нужно проверить состояние форм, является ли он грязным или нет, прежде чем перемещаться, поэтому вы можете получить это на ngOnDestroy(),Это событие вызывается, когда вы уходите от активного компонента.

, если вам нужно обрабатывать события браузера, такие как кнопка назад / обновление / закрытие, вам нужно добавить @HostListener decorator