奇怪的变化检测离子 3答案

【问题标题】：Strange change detection Ionic 3奇怪的变化检测离子 3
【发布时间】：2018-01-17 15:53:46
【问题描述】：

目前我正在用 Ionic3 包装我的 Angular4 应用程序。在此过程中，我遇到了 ChangeDetector 的一些奇怪行为。

这是我的标题模板。

header.html

<ion-header *ngIf="canDisplayHeader()" [ngStyle]="{'background-color': getColor(backgroundColorMap)}" ion-row>
 <ion-col class="back-button-container">
   <span class="k-icon-back back" [ngStyle]="{'color': getColor(logoColorMap)}"
      (click)="back()" *ngIf="showBackArrow()"></span>
 </ion-col>
 <ion-col class="logo-container" (click)="navigateToDefaultPage()">
   <span class="k-icon-cup_logo logo" [ngStyle]="{'color': getColor(logoColorMap)}"></span>
<div class="title-container">
  <span class="title" [ngStyle]="{'color': getColor(logoColorMap)}">KIOSK</span>
  <span class="office" [ngStyle]="{'color': getColor(fontColorMap)}">on {{getFormattedOfficeName()}}</span>
</div>
</ion-col>
<ion-col class="avatar-container" text-center (click)="changeVisibilityOfLogoutContainer()"
       (clickOutside)="hideLogoutContainerIfVisible($event)">
 <img src="{{employeeResource.getEmployeePicture()}}">
<div class="dropdown-container">
  <span [ngStyle]="{'color': getColor(fontColorMap)}">{{getEmployeeFullName()}}</span>
  <span class="k-icon-caret-down caret"></span>
</div>
<div class="dropdown-menu" *ngIf="isLogoutContainerVisible">
  <div class="menu-option" (click)="navigateToTransactions()">
    <span class="k-icon-coins menu-icon"></span>
    <span>Transactions</span>
  </div>
  <hr>
  <div class="menu-option" (click)="logout()">
    <span class="k-icon-logout menu-icon"></span>
    <span>Logout</span>
  </div>
</div>
</ion-col>
</ion-header>

clickOutside 指令监听事件并检查何时使用注销按钮隐藏下拉菜单。这是某种切换。它会在每次点击时正确记录事件，但 *ngIf="isLogoutContainerVisible" 不会检测到更改。 isLogoutContainerVisible 值更改，但模板看不到此更改。这里最奇怪的是模板是否看到取决于我点击的元素。单击它隐藏的某些元素后，在另一个隐藏的元素上，我应该手动调用ChangeDetectorRef.detectChanges()。系统中很少有地方有这个问题。

cli 包：

@ionic/cli-plugin-cordova       : 1.6.2
@ionic/cli-plugin-ionic-angular : 1.4.1
@ionic/cli-utils                : 1.7.0
ionic (Ionic CLI)               : 3.7.0

全局包：

Cordova CLI : 7.0.1

本地包：

@ionic/app-scripts : 2.1.3
Cordova Platforms  : android 6.2.3 ios 4.4.0 windows 5.0.0
Ionic Framework    : ionic-angular 3.5.3

系统：

Android SDK Tools : 26.0.2
Node              : v8.2.1
OS                : Linux 4.10
npm               : 5.3.0

【问题讨论】：

标签： angular angular2-template angular2-directives ionic3

【解决方案1】：

我找到了解决方案。这很简单。我只需要将所有视图包装在<ion-content> 中，而不是仅包装主要组件。

【讨论】：