angular - 属性绑定(bind) tabItem 未被嵌入式模板上的任何指令使用

Question

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

错误错误:未捕获( promise ):错误:模板解析错误:嵌入模板上的任何指令均未使用属性绑定(bind) 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 { }