在组件内的 nativescript angular2 中处理“后退”按钮

Question

我正在尝试处理Nativescript handling back button 中所示的“返回”按钮。提出了两种方法，并且都运行正常。我的问题是如何与组件的本地数据进行交互，因为 'android.on' 是一个全局事件。

当我的组件再次从另一个显示器（用户通过点击“返回”按钮关闭该显示器）接收控制时，我想要做的是刷新显示器（只需更新 ngFor 中引用的列表的模型）。

我一直在尝试访问“activityBackPressedEvent”属性，但找不到访问组件数据（“shopList”）的方法。

import { Component, OnInit, ViewChild } from "@angular/core";
import { Router } from "@angular/router";
import { RouterExtensions } from "nativescript-angular/router";
import { Page } from "ui/page";
import { ObservableArray } from "tns-core-modules/data/observable-array";
import { TokenModel } from "nativescript-ui-autocomplete";
import { RadAutoCompleteTextViewComponent } from "nativescript-ui-autocomplete/angular";
import { Utils } from '../../utils';
import * as SocialShare from "nativescript-social-share";
import { android, AndroidApplication, AndroidActivityBackPressedEventData } from "application";
import * as application from "tns-core-modules/application";
import {topmost} from "ui/frame";

@Component({
    //selector: "Shopping",
    moduleId: module.id,
    templateUrl: "./shopping.component.html",
    styleUrls: ['./shopping.component.css']
})

export class ShoppingComponent implements OnInit {
    shopList: string[] = [];
    constructor(private page: Page, private router: Router, private routerExt: RouterExtensions) {
        this.shopList = [];
        this.shopList.push ('sugar');
        this.shopList.push ('milk');
    }

    reload(args: AndroidActivityBackPressedEventData): void {
        console.log ('back pressed');
        console.log (this.shopList);  // <<--- "undefined"
    }

    ngOnInit(): void {
        android.on(AndroidApplication.activityBackPressedEvent, this.reload);
    }
}

Answer 1

问题是应用程序事件activityBackPressedEvent 是本机事件，而不是 Angular 事件。因此，在这种情况下，要保留 this 的含义，您需要旧的 this-that JavaScript 模式。

以下是如何修改代码以按预期工作：

reload(args: AndroidActivityBackPressedEventData): void {
    console.log ('back pressed');
    console.log (this.shopList);  // <<--- "[milk, sugar]"
}

ngOnInit(): void {
    let that = this;

    android.on(AndroidApplication.activityBackPressedEvent, (args: AndroidActivityBackPressedEventData) => {
        that.reload(args);
    });
}