Question

目前我正在使用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

Answer 1

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

奇怪的变化检测离子3

1 个答案: