Ionic 2视图不会更新

时间:2017-12-21 10:37:58

标签: angular ionic-framework ionic2

我正在尝试构建一个简单的自定义模块,该模块将在整个应用中显示错误。我尝试了很多东西,但是我无法让视图更新并显示新的错误。这是我尝试的最后一件事,只是相关的部分:

app.module.ts

import { ErrorMessageComponent } from '../components/error-message/error-message';

@NgModule({
  declarations: [
    ErrorMessageComponent,
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    ErrorMessageComponent,
  ],
  providers: [
    ErrorMessageComponent,
  ]
})
export class AppModule {}

error.message.ts

import { Component } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import { Subscription } from 'rxjs/Subscription';

@Component({
  selector: 'error-message',
  templateUrl: 'error-message.html'
})
export class ErrorMessageComponent {

  private error:string;
  private subscription: Subscription;
  private _error = new Subject<any>();

  constructor(
  ) {
    this.subscription = this.getError().subscribe(error => {
        console.log('getError', error);
        this.error = error;
    });
  }

  public getError(): Observable<any> {
      return this._error.asObservable();
    }

  public newError(error) {
    console.log('newError', error);
    this._error.next(error);
  }

  public dismiss() {
    this.error = null;
  }

}

错误-message.html

<div padding *ngIf="error">
    <p class="error">
        {{ error }}
    </p>
    <button ion-button="bar-button" icon-only (click)="dismiss()">
        <ion-icon name="close-circle"></ion-icon>
    </button>
</div>

我在我的主页上使用此服务:

home.ts

import { ErrorMessageComponent } from '../../components/error-message/error-message';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(
    public platform: Platform,
    public dataProvider: DataProvider,
    public errMsg: ErrorMessageComponent,
  ) {
    this.platform.ready().then(() => {
      this.dataProvider.getJobs().then((resp:any) => {
        // dataProvider is rigged to throw an error, caught bellow
      })
      .catch((e) => {
        this.errMsg.newError(e);
      }) 
    });
  }
}

在控制台中,我可以看到这两个日志:console.log('newError', error);console.log('getError', error);。但是,视图不会更新。可能是我是一个有角度的菜鸟。请帮忙

0 个答案:

没有答案