嵌入式模板上的任何指令均未使用属性绑定 tabItem

Question

我使用 tns-template-drawer-navigation-ng 搭建了我的应用程序，然后为其中一条路线添加了选项卡视图。当我单击指向选项卡视图的抽屉链接时，我收到以下错误消息：

ERROR 错误：未捕获（承诺中）：错误：模板解析错误： 嵌入模板上的任何指令均未使用属性绑定 tabItem。

确保属性名称拼写正确，并且所有指令都列在“@NgModule.declarations”中。“TabView androidTabsPosition="bottom"

我的代码如下：

app-AppRoutingModule.module.ts

import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";
import { NativeScriptRouterModule } from "nativescript- 
angular/router";

const routes: Routes = [
  { path: "", redirectTo: "/home", pathMatch: "full" },
  { path: "home", loadChildren: "./home/home.module#HomeModule" },
  { path: "tabby", loadChildren: "./tabby/tabby.module#TabbyModule" }
];

@NgModule({
  imports: [NativeScriptRouterModule.forRoot(routes)],
  exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }

tabby.module.ts

import { NgModule, NgModuleFactoryLoader, NO_ERRORS_SCHEMA } from 
"@angular/core";
import { TabbyRoutingModule, COMPONENTS } from "./tabby- 
routing.module";
import { TabbyComponent } from "./tabby.component";
import { CoreModule } from "./core.module";

@NgModule({
  bootstrap: [
    TabbyComponent
  ],
  imports: [
    TabbyRoutingModule,
    CoreModule
  ],
  declarations: [
    TabbyComponent,
    ...COMPONENTS
  ],
  schemas: [
    NO_ERRORS_SCHEMA
  ]
})
export class TabbyModule { }

tabby-routing.module.ts

import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";
import { NativeScriptRouterModule } from "nativescript- 
angular/router";

import { OneComponent } from "./One/one.component";
import { TwoComponent } from "./Two/two.component";

export const COMPONENTS = [ OneComponent, TwoComponent ];

const routes: Routes = [
  { path: "", redirectTo: "/(oneTab:one//twoTab:two)", pathMatch: "full" },

  { path: "one", component: OneComponent, outlet: "oneTab" },
  { path: "two", component: TwoComponent, outlet: "twoTab" }
];

@NgModule({
  imports: [NativeScriptRouterModule.forRoot(routes)],
  exports: [NativeScriptRouterModule]
})
export class TabbyRoutingModule { }

tabby.component.html

<TabView androidTabsPosition="bottom">

  <StackLayout
    *tabItem="{title: 'One', iconSource: getIconSource('home')}"
    name="homeTab">
 </StackLayout>

<StackLayout
    *tabItem="{title: 'Two', iconSource: getIconSource('home')}"
    name="twoTab">
</StackLayout>

</TabView>

软件包版本

"@angular/core": "~6.0.6",
"nativescript-theme-core": "~1.0.4",
"nativescript-ui-sidedrawer": "~4.1.0",

"name": "tns-template-drawer-navigation-ng",
"version": "4.1.2"

Answer 1

在tabby.module.ts 中确保导入NativeScriptCommonModule：

import { NgModule, NgModuleFactoryLoader, NO_ERRORS_SCHEMA } from 
"@angular/core";
import { TabbyRoutingModule, COMPONENTS } from "./tabby- 
routing.module";
import { TabbyComponent } from "./tabby.component";
import { CoreModule } from "./core.module";
import { NativeScriptCommonModule } from "nativescript-angular/common";

@NgModule({
  bootstrap: [
    TabbyComponent
  ],
  imports: [
    NativeScriptCommonModule,
    TabbyRoutingModule,
    CoreModule
  ],
  declarations: [
    TabbyComponent,
    ...COMPONENTS
  ],
  schemas: [
    NO_ERRORS_SCHEMA
  ]
})
export class TabbyModule { }