代码之家 › 专栏 › 技术社区 › Narendra

在ActivityResumedEvent上调用段栏加载事件

nativescript android

Narendra · 技术社区 · 7 年前

在Android上的NativeScript应用程序中,我使用的是一个分段栏,我注意到每当用户最小化应用程序并再次恢复时,都会调用(加载的)事件。

<SegmentedBar width="100%" height="100%" selectedIndex="{{segmentedIndex}}" (selectedIndexChange)="onSelectedIndexChange($event)"
                    style="font-family: 'FontAwesome'" (loaded)="onBarLoaded($event)">
                    <SegmentedBarItem title="{{currentText | decodeHTML}}" class="fa label-text-icon"></SegmentedBarItem>
                    <SegmentedBarItem title="{{pastText | decodeHTML}}" class="fa label-text-icon"></SegmentedBarItem>
                </SegmentedBar>
            </StackLayout>

这是预期的行为还是错误? 另外,我正在加载条上进行API调用,每次活动恢复时,应用程序都会再次进行API调用。如果这是预期的行为,那么我可能需要处理这个事件。

android.on(AndroidApplication.activityResumedEvent, function (args: AndroidActivityEventData) {

        console.log("Event: " + args.eventName + ", Activity: " + args.activity);
    });

2 回复 | 直到 7 年前

Manoj 7 年前

这不是错误,而是预期的行为。每当本机视图被回收时,将调用已加载的事件,如继续/导航回上一页。我认为在这里使用应用程序设置可能是一种开销。你为什么不试着在第一次使用后删除你的听众?

export function onLoaded(args) {
    // Removes any loaded event listeners attached in the object
    args.object.off('loaded');
    // Write code here
}

更新: 上面的解决方案可能很适合核心应用程序,对于Angular,我们可以使用一个只监听给定事件一次的指令。

listen-once.directive.ts指令

import { Directive, OnInit, OnDestroy, Input, Output, EventEmitter, ElementRef, Renderer2 } from "@angular/core";

import { EventData } from "data/observable";
import { View } from "ui/core/view";

@Directive({
    selector: "[listenOnce]",
})
export class ListenOnceDirective implements OnInit, OnDestroy {

    @Input() eventName: string = View.loadedEvent;
    @Output() listenOnce: EventEmitter<EventData> = new EventEmitter();

    listener: () => void;

    constructor(private renderer: Renderer2, private el: ElementRef) { }

    ngOnInit() {
        this.listener = this.renderer.listen(this.el.nativeElement, this.eventName, (event: EventData) => {
            this.removeListener();
            this.listenOnce.emit(event);
        });
    }

    ngOnDestroy() {
        this.removeListener();
    }

    private removeListener() {
        if (this.listener) {
            this.listener();
            this.listener = null;
        }
    }
}

确保在适当的模块中导入此指令。然后你可以简单地在分段条上做这个。

<SegmentedBar width="100%" height="100%" selectedIndex="{{segmentedIndex}}" (selectedIndexChange)="onSelectedIndexChange($event)"
                style="font-family: 'FontAwesome'" (listenOnce)="onBarLoaded($event)">
                <SegmentedBarItem title="{{currentText | decodeHTML}}" class="fa label-text-icon"></SegmentedBarItem>
                <SegmentedBarItem title="{{pastText | decodeHTML}}" class="fa label-text-icon"></SegmentedBarItem>
            </SegmentedBar>
        </StackLayout>

jcasanova 7 年前

我使用一个标志var传递了这个bug来标识已经加载了这个视图,例如,当加载时,我保存了一个名为loaded=1的var,然后在加载的事件顶部检查是否加载了它。

var applicationSettings = require("application-settings");
var isloated = applicationSettings.getString("loaded",0);
if(isolated == 0){
   here means that is the first time
}else{
   do nothing
}