Question

更新3：

实际上我找到了导致我的代码初始问题的原因。如果我使用Ionic / Angular侦听器绑定到我的代码中的按钮 - 然后将变量for false更改为true - 确实会更改UI状态。

但是，如果我使用自定义侦听器（＆＃39; touchstart＆＃39;），那么即使变量发生变化 - 也不会导致UI刷新。我认为这是由角度渲染等方式起作用的。但我希望在某处记录下来。

使用代码段进行编辑+说明在代码段中我们有父子组件，其中子项的发布事件需要更改父组件的可见性。

编辑澄清问题：

在我的代码中，我有一个非常简单的组件（下面），我想让这些UI游侠在showSliders变量的布尔状态后显示/消失动态。

我验证了我在变量中更新了值，但我想该视图只会在渲染时或类似内容时读取它。

所以我再次看到UI没有显示[隐藏] =＆＃34; showSliders＆＃34; （showSliders在这里是真的），反之亦然。

但问题是 - 如果页面已经在一个状态下呈现自己，那么动态更改变量不会导致UI出现/消失。

我有一个简单的方法来实现这个目标吗？

在javascript中我可能会得到DIV的ID.style.display =＆＃34; none＆＃34;一旦我得到布尔值。我怎样才能在角度2 +中做同样的事情？

＆＃13;

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { ChildComponent } from '../../components/child/child'

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  public hidden: boolean = false; 

  constructor(public navCtrl: NavController) {

  }
  toggleButton() {
    this.hidden = !this.hidden;
    console.log(this.hidden);
  }

  getEvent($event) {
    console.log($event);
    this.hidden = $event;
  }
}

// CHILD:

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'child',
  template: '<button block ion-button (click)="toggleButton()">Hide Toggle (Child)</button>'
})
export class ChildComponent {

  @Output() onSomeEvent = new EventEmitter<any>();

  boolean: boolean = false;

  constructor() {
    console.log('Hello ChildComponent Component');
  }

  toggleButton() {
    this.onSomeEvent.emit(this.boolean);
    console.log("pressed Child button")
  }

}

＆＃13;

// PARENT VIEW:

<ion-header>
  <ion-navbar>
    <ion-title>
      Just playground
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
 

  <ion-item [hidden]="hidden">
    <ion-range>
      <ion-icon range-left small name="sunny"></ion-icon>
      <ion-icon range-right name="sunny"></ion-icon>
    </ion-range>
  </ion-item>

  <button block ion-button (click)="toggleButton()">Hide Toggle (Parent)</button>
  <child (onSomeEvent)="getEvent($event)"></child>

</ion-content>



<ion-footer>
  
</ion-footer>

＆＃13;

Answer 1

您可以简单地使用*ngIf=""结构指令。

<div *ngIf="!showSliders"> 
  <div [hidden]="bottomPanelStylesState!=='line'">
    <ion-range min="0" max="100%" pin="true" color="secondary" [(ngModel)]="svgchild.lineSlider">
      <ion-icon range-left small name="contrast"></ion-icon>
      <ion-icon range-right name="contrast"></ion-icon>
    </ion-range>
  </div>
  <div [hidden]="bottomPanelStylesState!=='fill'">
    <ion-range min="0%" max="100%" pin="true" color="secondary" [(ngModel)]="svgchild.fillSlider">
      <ion-icon range-left small name="moon"></ion-icon>
      <ion-icon range-right name="moon"></ion-icon>
    </ion-range>
  </div>
  <div [hidden]="bottomPanelStylesState!=='filter'">
    <ion-range min="0%" max="100%" pin="true" color="secondary" [(ngModel)]="svgchild.filterSlider">
       <ion-icon range-left small name="leaf"></ion-icon>
       <ion-icon range-right name="leaf"></ion-icon>
    </ion-range>
  </div>
</div>

[hidden]和*ngIf=""之间的区别在于，hidden应用了CSS display:hidden prperty，*ngIf=""从DOM中删除了该元素。

此处，有时使用[hidden]可能会导致问题，因为可以覆盖这些问题。这可能是个问题。

Answer 2

通过我的研究，我发现如果UI组件（如“离子工具栏”）通过绑定到变量的* ngIf或[hidden]属性设置条件可见性 - 则通过Ionic / Angular侦听器更改此变量（单击， tap etc）将动态更新UI，而如果使用DOM级别侦听器（.addEventListener），则即使绑定到UI状态的变量发生更改，UI也不会更新。

示例（不是真正的代码示例，但在概念上）：

isItHidden:boolean = false;

<ion-toolbar #toolbar [hidden]=isItHidden (click)="changeVisibility()"><ion-toolbar>

@Viewchild('toolbar'): toolbar;

toolbarElem = this.toolbar.nativeElement;
toolbarElem.addEventListener("touchstart", function(){});

这个绑定有什么问题？（Angular 2+）

2 个答案:

这个绑定有什么问题？ （Angular 2+）

2 个答案:

这个绑定有什么问题？（Angular 2+）