Question

我目前正在尝试开发自己的自定义组件，并且在布尔条件更改为true时尝试让组件显示时出现问题。

我尝试使用“ ChangeDetectorRef ”并在更改布尔状态后使用“ detectChanges（）”。不幸的是，我一直收到提供商错误：

错误：没有ChangeDetectorRef的提供者！

我在页面中使用了changeRef而没有任何问题。我真的不明白为什么它需要一个组件的提供者，当它假设默认构建到Ionic模块中时？

我也尝试在页面上使用changeRef.detectChange（），没有提供程序错误 - 但组件仍然没有显示。

自定义组件：

import { Component, Injectable, NgZone, ChangeDetectorRef } from '@angular/core';

    @Component({
      selector: 'options-popup',
      templateUrl: 'options-popup.html'
    })

    @Injectable()
    export class OptionsPopup {

        public showOptionsMenu:Boolean = false;
        public optionsMenu: {
            header:string,
            options: { iconURL: any, label:string, tapAction: string }[]
        };

        constructor( private changeRef: ChangeDetectorRef) {

        }

        public create( optionsMenu: { header:string, options: { iconURL: any, label:string,
                tapAction: string }[] } ){

            this.optionsMenu = optionsMenu;
        }

        public present(){

            this.showOptionsMenu = true;

            this.changeRef.detectChanges();

            console.log("present clicked - set to " + this.showOptionsMenu);
        }

        public dismiss(){
            this.showOptionsMenu = false;
            // this.cdRef.detectChanges();
        }

    }

组件HTML：

<div class="options-container" *ngIf="showOptionsMenu">
    <div class="options-header-wrapper"> Send Images to:</div>
    <div class="options-content" >

        <div class="options-item-wrapper" *ngFor="let option of optionsMenu.options">
            <div class="options-kiosk-icon" [style.background-image]="option.iconURL" 
            *ngIf="option.iconURL != null"></div>
             {{ option.label }}
        </div>

    </div>
    <div class="options-cancel-wrapper">Back</div>
</div>

<div class="options-screen-overlay" *ngIf="showOptionsMenu"></div>

使用组件的页面：

 public createSelectIKPopover(){    
        let options: { iconURL: any, label:string, tapAction: string }[] = [];    
        options.push( { iconURL: null, label: "IK01", tapAction: "" } );    
        this.optionsPopup.create( { header: "", options: options });    
        this.optionsPopup.present();    
        this.changeRef.detectChanges();
    }

Answer 1

您应该使用Angular服务ngZone。

this.ngZone.run(() => {
    this.optionsMenu = optionsMenu;
});

Answer 2

将条件设为*ngIf="showOptionsMenu == true"并检查

Ionic 3 - * ngIf绑定在条件改变时不更新

2 个答案: