如何在 NativeScript Angular 中禁用/启用没有 actionView 的 actionItem？答案

【问题标题】：How to disable/enable an actionItem without an actionView in NativeScript Angular?如何在 NativeScript Angular 中禁用/启用没有 actionView 的 actionItem？
【发布时间】：2019-07-28 21:15:13
【问题描述】：

我有一个 ActionItem：

<ActionItem #finishActionItem text="Finish" ios.position="right" android.position="actionBar" (tap)="handleFinish()"></ActionItem>

如何禁用/启用 actionItem？我知道这在本地很容易做到，但似乎无法弄清楚如何在 NativeScript angular 中做到这一点。

我尝试过使用 actionView，但 actionView 仅适用于 actionItem 中的某些类型的视图。我不想要 actionItem 中的标签，因为这需要我自己设置样式。

我该如何解决这个问题？

【问题讨论】：

标签： angular nativescript angular2-nativescript

【解决方案1】：

NativeScript 不支持这一点，但您仍然可以使用一些本机代码来实现。

在构造函数中注入Page

import { Page } from "tns-core-modules/ui/page";

...

constructor(private page: Page) { }

要在您的代码中禁用finishActionItem，

if (this.page.actionBar.android) {
                const menu = this.page.actionBar.nativeView.getMenu();
                menu.findItem(this.finishActionItem.nativeElement._getItemId()).setEnabled(false);
            } else {
                const navigationItem = this.page.ios.navigationItem,
                    barButtonItems = this.finishActionItem.nativeElement.ios.position === "left" ? navigationItem.leftBarButtonItems : navigationItem.rightBarButtonItems;

                let barButtonItem;
                for (const item of barButtonItems) {
                    if (item.accessibilityLabel === this.finishActionItem.nativeElement.text) {
                        barButtonItem = item;
                        break;
                    }
                }

                if (barButtonItem) {
                    barButtonItem.enabled = false;
                }
            }

【讨论】：

正是我想要的！非常感谢！
我不得不将 ios 部分更改为： const barButtonItem = this.page.ios.navigationItem.rightBarButtonItem; if (barButtonItem) { barButtonItem.enabled = 启用； }
我正在努力解决同样的问题。我正在使用 Nativescript/Angular 并尝试实现上述解决方案，但是代码找不到 this.finishActionItem。我看到它是操作项的 ID (#finishActionItem)，但我得到红色波浪形并编译错误。此解决方案中是否存在上面未显示的内容？我的 ActionBar 在我的 app.component.html 中，因此它会自动显示在所有页面中，以方便并防止冗余代码。但它显示在我的登陆页面上，我试图仅从登陆页面隐藏一些 ActionItem 节点。
Webpack 构建完成！项目成功准备（android）在设备 emulator-5554 上成功传输 tns-java-classes.js。在设备 emulator-5554 上成功传输 vendor.js。正在设备 emulator-5554 上重新启动应用程序...已成功同步设备 emulator-5554 上的应用程序 org.nativescript.blankng。 JS：HMR：启用热模块更换。等待信号。 JS：错误类型错误：无法读取未定义的属性“getMenu”。看起来我可能缺少以下库：actionBar.nativeView 对象？ this.page.actionBar.nativeView.getMenu();
忘了补充一下，我的 ngOnInit() 中有代码：void { ... } 方法，它在着陆视图组件中，而不是在 app.component.ts 中。上面的答案没有指定代码的放置位置。