NativeScript 选项卡视图属性绑定 tabItem 错误答案

【问题标题】：NativeScript Tab View Property binding tabItem errorNativeScript 选项卡视图属性绑定 tabItem 错误
【发布时间】：2016-10-13 05:49:12
【问题描述】：

我想用 Angular 2.0.1、NativeScript 2.3.0 实现 TabView。我遵循这个官方指南here，但在下面遇到了一个问题。

<TabView #tabview>
        [ERROR ->]<StackLayout *tabItem="{title: 'Profile'}" >
          <ListView [items]='items'>
            <template let-i"): LoginComponent@17:4
    Property binding tabItem not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "directives" section. ("
          </ListView>
        </StackLayout>
        [ERROR ->]<StackLayout *tabItem="{title: 'Stats'}">
          <Label text="Second tab item"></Label>
        </StackLay"): LoginComponent@24:4
    Property binding tabItem not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "directives" section. ("
          <Label text="Second tab item"></Label>
        </StackLayout>
        [ERROR ->]<StackLayout *tabItem="{title: 'Settings'}">
          <Label text="Third tab item"></Label>

我从编译器得到的错误是

Property binding tabItem not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "directives" section.

我以为所有的 nativescript 指令 都已默认包含，例如：Button、TextField 等。*tabItem 是我需要手动导入的特殊指令吗？

顺便说一句，我真正想做的是在手机底部有一个 TabView 棒，就像带有几个标签的 Dock，就像 Facebook 移动应用程序坞一样。谁能发个代码sn-p？

【问题讨论】：

在 Android 和 iOS 上测试文章中的示例时，我无法重现问题。关于这一点，如果您可以在使用 TabView 组件的地方共享代码，这将有所帮助。此时，对于 Android，TabView 的选项卡将始终位于顶部，并且它们的位置无法更改。为了您的目的，您可以使用 SegmentedBar 并手动控制布局的可见性 - github.com/NativeScript/nativescript-sdk-examples-ng/tree/…。

标签： nativescript angular2-nativescript

【解决方案1】：

确保在 Angular @NgModule 中导入 NativeScriptModule：

import { NativeScriptModule } from 'nativescript-angular/platform';
...
@NgModule({
  imports: [NativeScriptModule, ...]
})

回答迟了，但希望对其他人有所帮助。

【讨论】：

【解决方案2】：

这个问题是 2 年前提出的，但我今天遇到了这个错误，这就是我最终修复它的方法。我使用一个结构，其中所有页面都由PageModule 导入，然后PageModule 由AppModule 导入。手头的问题：PageModule 不知道NativeScriptModule。如果您将NativeScriptModule 添加到您的PageModule 的import 数组（或您正在使用的任何其他模块，可能用于导入组件或其他任何东西），它将解决问题。

import { NativeScriptModule } from "nativescript-angular/nativescript.module";
// Module declaration, not important
imports = [
    // Other imports
    NativeScriptModule
],

【讨论】：

对于延迟加载，应该尝试使用 NativeScriptCommonModule，因为 NativeScriptModule 必须已经导入到 AppModule 中。

【解决方案3】：

你只需要导入通用模块，它负责 tabViews 及其所有子属性和元素。

import { NativeScriptCommonModule } from 'nativescript-angular/common';

别忘了在你的导入中挂载。

@NgModule({
  imports: [NativeScriptCommonModule, ...]
})

【讨论】：