如何从角度6中的父组件访问子组件中的窗体？

Question

我的问题是，我有一个父组件，并且我的父component.Parent组件的许多子组件没有任何表单，子组件有forms.All，子组件共享父组件和子组件的相同路由--连接到唯一的identify.So任务是在表单脏时显示弹出，并且用户正在从"app.module.ts“中实现的page.So导航-禁用guard.So (bcz子组件没有任何路由器路径)。我怎样才能做到这一点？

有人能帮我解决这个问题吗?从过去的两天开始挣扎:(任何其他的解决方案也是好的，Hugeee thanx提前。)

可以-停用-保护：

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

组件-可以停用。can：

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

表格可以停用。

export abstract class FormCanDeactivate extends ComponentCanDeactivate{

 abstract get form():NgForm;

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

父component.html:No窗体在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而不更改urls，并且在导航之前需要检查表单状态是否为脏，那么您可以在ngOnDestroy()上获得它。一旦您离开活动组件，此事件就会触发。

如果需要处理浏览器事件，如后退/刷新/关闭按钮，则需要添加@HostListener装饰器。