Question

我正在使用模板驱动的表单。我有一个父组件

parent.component.html

<tab>
  <form>
     <input></input>
     <button></button>
   </form>
<tab>
   <form>
          <child-component 1></child-component 1>
    </form>
</tab>


<tab>
   <form>
          <child-component 2></child-component 2>
    </form>
</tab>


<tab>
   <form>
          <child-component 3></child-component 3>
    </form>
</tab>

在CanDeactivateGuard中，如何检查子组件是否脏？还有如何在表单脏时阻止关闭浏览器？（我有多个表格标签）

Answer 1

这里有两个问题：

1）“我如何检查子组件是否脏”

你可以通过多种方式实现这一点，我能想到的简单方法就是：

为每个孩子使用ViewChild
每个孩子都有一些方法，如isDirty
您在父母中调用Child的isDirty方法来检查它们是否脏了

2）“以及如何在表单变脏时阻止关闭浏览器”

回答2：你不能。你可以做的是防止破坏应用程序内部的组件，例如，如果用户想要从“添加客户”屏幕转到“客户列表”屏幕并且表单很脏，那么就会发生一些事情。

要实现这个目标：

<强> app.routes.ts

export const appRoutes: Routes = [{
  (...)
  }, {
    path: 'path-to-parent',
    component: ParentComponent,
    canDeactivate: [CanDeactivateGuard],
  }, {
  (...)
}]

一些保护文件，例如 can-deactivate.guard.ts

export interface GuardedComponent {
  canDeactivate: (nextStateUrl?: string) => Observable<boolean> | boolean;
}

@Injectable()
export class CanDeactivateGuard implements CanDeactivate<GuardedComponent> {

  constructor() {}

  public canDeactivate(
    component: GuardedComponent,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState: RouterStateSnapshot
  ): boolean | Observable<boolean> {
    return component.canDeactivate(nextState.url);
  }
}

然后在 parent.component.ts

中

  public canDeactivate(): boolean | Observable<boolean> {
    // code which will decide if component can be deactivated
  }

当我有多个表单标签时，如何检查CanDeactivateGuard中的子组件是否脏？

1 个答案: