从 NativeScript 4 开始如何正确引用模态答案

【问题标题】：How to properly reference modals as of NativeScript 4从 NativeScript 4 开始如何正确引用模态
【发布时间】：2018-07-23 00:05:27
【问题描述】：

我已经使用 NativeScript Angular 构建了一个应用程序（现在在 v4.1 上）。我正在使用下面的代码在 Android 上设置状态栏颜色，这适用于使用角度路由的“常规”视图：

if (isAndroid) {
  if (app.android && device.sdkVersion >= '21') {
    const nativeColor = new Color('purple').android;
    const window = app.android.startActivity.getWindow();
    window.addFlags(android.view.WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
    app.android.startActivity.getWindow().setStatusBarColor(nativeColor);
  }
}

但是，它不适用于模式，其中彩色状态栏变为黑色。有人知道这是为什么吗？我最好的猜测是app.android.startActivity.getWindow() 没有引用模态框，但我不清楚如何获取它。

不确定这在多大程度上是相关的，但我也无法通过使用文档中的此代码在模式中的 iOS 上设置不同的加载指示器（在非模式视图中再次正常工作）：

if (isIOS) {
  var indicator = this.page.getViewById("spinner");
  indicator.ios.activityIndicatorViewStyle = UIActivityIndicatorViewStyle.WhiteLarge;
}

感谢您的指点！

附言

这是一个demo project，它显示了 Android 上的状态栏以及无法在 iOS 上设置活动指示器的问题。

【问题讨论】：

你能创建游乐场演示吗？
@bhavinjalodara 当然！我编辑了答案以包含一个演示项目。谢谢！

标签： nativescript nativescript-angular

【解决方案1】：

对于稍后阅读此内容的任何人：我在 NativeScript forum 上获得了一些帮助，但尚未完成在模式上设置状态栏颜色，但我能够跨越模式组件中状态栏下的背景对我的目的来说已经足够了。

我还能够通过在指示器元素上使用 Angular ViewChild 而不是通过 Page 找到它（原来不是指模态）来更改模态中的 ActivityIndicator。

import { Component, OnInit, AfterViewInit, ViewChild, ElementRef } from "@angular/core";
import { ModalDialogParams } from "nativescript-angular/modal-dialog";
import { isIOS, isAndroid, device } from 'platform';
import * as app from "application";

declare var UIActivityIndicatorViewStyle: any;
declare var android: any;

@Component({
    template: `
        <StackLayout #root>
            <StackLayout orientation="horizontal">
                <ActivityIndicator #spinner id="spinner" busy="true"></ActivityIndicator>
                <ActivityIndicator busy="true"></ActivityIndicator>
            </StackLayout>
        </StackLayout>
    `
})
export class ModalTest implements OnInit, AfterViewInit {
    @ViewChild('root') root: ElementRef;
    @ViewChild('spinner') spinner: ElementRef;

    constructor(
        public modalParams: ModalDialogParams
    ) {}

    public ngOnInit() {

        /* show large activity indicator on iOS */

        if (isIOS) {
            this.spinner.nativeElement.ios.activityIndicatorViewStyle = UIActivityIndicatorViewStyle.WhiteLarge;
        }
    }

    public ngAfterViewInit() {
        if (isAndroid) {

            setTimeout(() => {
                if (app.android && device.sdkVersion >= '21') {
                    const dialog = this.root.nativeElement._dialogFragment.getDialog();
                    const window = dialog.getWindow();
                    window.addFlags(android.view.WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
                }
            },1);
        }
    }

    public closeModal() {
        this.modalParams.closeCallback();
    }
}

【讨论】：