Question

我想在他/她从页面导航并且有一些未保存的更改时警告用户。我是使用插件angular 1在ng-unsaved changes中完成的。但在angular 4中，搜索完所有网页后，建议使用canDeactivate。它适用于简单的形式。但是我有一个包含子组件的表单。像路线一样导航到具有客户列表的页面和添加新客户的按钮。新客户是一个单独的组件，我已将其作为子组件添加到客户列表中。像这样：

<!--   *** Section:CreateClient  ***  -->
<div class="row" *ngIf="pageAction=='clientDetail'">
    <div class="col-md-12">                    
        <app-client-create class="card-header-up" [clientId]="selectedClient.EntityId" (createClientResponse)='createClientCallBack($event)' [calledBy]="prmInCalledBy" [pageMode]="pageMode"></app-client-create>            
    </div>
</div>

现在，如果用户对此子组件进行了一些更改，则父组件上的CanDeactiavte不会触发。当用户导航时，我们如何访问子组件的FormGroup.Dirty属性来自页面。我们如何解雇儿童成分CanDeactivate？请帮助代码/ plunker示例。

Answer 1

您可以使用canActivateChild。只要在其定义的路线的子项之间进行更改，就会调用canActivateChild。

请参阅以下plnkr

中的canAcivateChild

<强> PLNKR

子组件上的Angular4 CanDeactivateGuard

1 个答案: