屏幕方向已更改更新文本

Question

查看：

<Label [text]="name"></Label>

组件：

import {  Component } from '@angular/core'
import * as screenOrientation from '@nativescript/core/application';

@Component({
 selector: 'ns-new',
 templateUrl: './new.component.html',
 styleUrls: ['./new.component.css'],
})

export class NewComponent {

  name:string = "Not Rotated";
  constructor( ) {
    screenOrientation.on("orientationChanged", this.onOrientationChanged)
  }

  onOrientationChanged = (evt) => {
    console.log("old name " + this.name);
    this.name="Rotated";
    console.log("new name " + this.name);
  }
}

旋转屏幕时，文字不变。

屏幕旋转
代码已执行
但是 Label 中的文本没有改变。

有谁知道我错过了什么，或者问题出在哪里？

Answer 1

我认为问题在于，当您在“外部”Angular 进行更改时，您需要指明 Angular 发生更改 (*)。为此，您需要 use ngZone

//in constructor you inject ngZone
constructor(private ngZone: NgZone) { }

//when a change outside Angular happens

onOrientationChanged(evt) => {
  //this line happens outside Angular
  console.log("old name " + this.name);

  this.ngZone.run(() => {  //but these another run in Angular
      this.name="Rotated";
      console.log("new name " + this.name);
  })
})

(*)典型案例是 javaScript 中的调用或来自 Cordova

的事件

屏幕方向已更改更新文本

Screen orientationChanged update text

nativescript

angular