Angular *ngIf 之后的“回调”答案

【问题标题】："Callback" after Angular *ngIfAngular *ngIf 之后的“回调”
【发布时间】：2018-03-19 16:50:21
【问题描述】：

我是 Angular 和它的概念的新手，我正在努力思考如何处理这种特殊情况。

我正在使用 Cordova 的键盘插件中的事件在我的页面组件中设置 keyboardVisible 属性，并使用它来显示/隐藏页脚。

<ion-footer *ngIf="!keyboardVisible">
    <ion-text>Footer content</ion-text>
</ion-footer>

页脚已正确隐藏/显示，但我需要在组件中的底层Content 上调用resize() 以更新布局（as is mentioned here）...

@ViewChild(Content) content: Content;
this.content.resize();

...在*ngIf 指令完成后，我无法弄清楚如何/在哪里调用它。

【问题讨论】：

标签： angular ionic-framework ionic3 angular-ng-if

【解决方案1】：

如果调整大小没有返回任何内容，您可以这样做

<ion-footer *ngIf="!keyboardVisible">
    {{content.resize()}}
    <ion-text>Footer content</ion-text>
</ion-footer>

【讨论】：

问题是我需要在键盘打开和关闭后调用resize事件（所以当keyboardVisible == true和keyboardVisible == false时）。我不认为这会在这里工作，因为它只会在它关闭时被调用。

【解决方案2】：

<ion-footer *ngIf="check(!keyboardVisible)"">
<ion-text>Footer content</ion-text>
</ion-footer>

export class YourCom{

   check(item){
       if(!keyboardVisible){
          this.content.resize();
       }

   }
}

提醒您，如果您调用以某种方式更新视图的函数，您会从更改检测中得到一个错误，显示 >“检查视图后更新表达式”

【讨论】：

谢谢，但是 content.resize 方法是内置在 Ionic 中的，据我所知，这是在修改视图布局后推荐的刷新视图布局的方法。