Angular2 Native |功能模块的组件文件无法解析

Question

我正在使用 NativeScript with Angular 来开发移动应用。

我创建了一个名为共享的模块，我决定创建一个常用的组件。

所以我尝试使用RadSideDrawer创建一个名为“side-drawer”的组件，并将该组件用作其他组件的父组件。

但是当我尝试运行应用程序时，它显示“side-drawer.component.html无法解析。”

我已经附加了文件夹结构app.module.ts，使用了侧抽屉的组件＆amp;错误。

请分享您的观点。 TIA

//app.module.ts
import {
  NgModule,
  NO_ERRORS_SCHEMA
} from "@angular/core";
import {
  NativeScriptModule
} from "nativescript-angular/nativescript.module";
import {
  AppRoutingModule
} from "./app.routing";
import {
  AppComponent
} from "./app.component";

/*3rd Party Dependencies*/
import {
  NativeScriptUISideDrawerModule
} from "nativescript-pro-ui/sidedrawer/angular"


/*internal modules*/
import {
  ItemService
} from "./item/item.service";
import {
  ItemsComponent
} from "./item/items.component";
import {
  ItemDetailComponent
} from "./item/item-detail.component";
import {
  SharedModule
} from './shared/shared.module';

@NgModule({
  bootstrap: [
    AppComponent
  ],
  imports: [
    NativeScriptModule,
    AppRoutingModule,
    NativeScriptUISideDrawerModule,
    SharedModule
  ],
  declarations: [
    AppComponent,
    ItemsComponent,
    ItemDetailComponent
  ],
  providers: [
    ItemService
  ],
  schemas: [
    NO_ERRORS_SCHEMA
  ]
})
/*
Pass your application module to the bootstrapModule function located in main.ts to start your app
*/
export class AppModule {}

//shared/side-drawer/side-drawer.component.ts
import {
  Component,
  ViewChild,
  AfterViewInit,
  OnDestroy
} from '@angular/core';
import {
  ActivatedRoute
} from '@angular/router';
import {
  RouterExtensions
} from 'nativescript-angular/router';

import {
  Page
} from 'ui/page';
import {
  isAndroid,
  isIOS
} from 'platform';
import {
  ActionItem
} from 'ui/action-bar';
import {
  RadSideDrawerComponent,
  SideDrawerType
} from "nativescript-pro-ui/sidedrawer/angular";
import {
  RadSideDrawer,
  SlideInOnTopTransition,
  PushTransition
} from 'nativescript-pro-ui/sidedrawer';

@Component({
  selector: 'app-side-drawer',
  templateUrl: './side-drawer.component.html',
  styleUrls: ['./side-drawer.component.css']
})
export class SideDrawerComponent implements AfterViewInit, OnDestroy {
  @ViewChild(RadSideDrawerComponent) public drawerComponent: RadSideDrawerComponent;
  /**
   * On tap of any side-drawer item, hiding content if this flag is true.
   */
  isContentVisible: boolean = true;

  /**
   * For android using SlideOnTop transition and for iOS, push transition.
   */
  drawerTransition: any;

  /**
   * Navigation Menu Items
   */
  navMenu: any[] = [{
      name: 'Home',
      commands: ['/']
    },
    {
      name: 'About',
      commands: ['/about']
    },
    {
      name: 'Contact',
      commands: ['/contact']
    }
  ];

  private drawer: SideDrawerType;

  constructor(
    private routerExtensions: RouterExtensions,
    private activatedRoute: ActivatedRoute,
    private page: Page
  ) {
    console.log("Hellooo");
    console.log(this.drawer);
    this.setActionBarIcon(this.page);
    this.setDrawerTransition();
    this.toggleSideDrawer();
  }

  ngAfterViewInit() {
    this.drawer = this.drawerComponent.sideDrawer;
  }

  ngOnDestroy() {
    this.drawer.off('drawerClosed');
  }

  toggleSideDrawer() {
    this.drawer.toggleDrawerState();
  }

  /**
   * Navigates to next page after drawer is closed.
   */
  navigateTo(routeCommands: any[]) {
    this.drawer.closeDrawer();
    let currentUrl = this.routerExtensions.router.routerState.snapshot.url;
    let newUrlTree = this.routerExtensions.router.createUrlTree(routeCommands);
    let newUrl = this.routerExtensions.router.serializeUrl(newUrlTree);
    if (currentUrl !== newUrl) {
      this.isContentVisible = false;
    }
  }

  private setDrawerTransition() {
    if (isAndroid) {
      this.drawerTransition = new SlideInOnTopTransition();
    }

    if (isIOS) {
      this.drawerTransition = new PushTransition();
    }
  }

  private setActionBarIcon(page: Page) {
    if (isAndroid) {
      page.actionBar.navigationButton = this.getNavigationButton();
    }

    if (isIOS) {
      page.actionBar.actionItems.addItem(this.getNavigationButton());
    }
  }

  private getNavigationButton() {
    let navActionItem = new ActionItem();
    navActionItem.icon = 'res://ic_menu_black';
    if (navActionItem.ios) {
      navActionItem.ios.position = 'left';
    }
    navActionItem.on('tap', this.toggleDrawer.bind(this));
    return navActionItem;
  }

  private toggleDrawer() {
    this.drawer.toggleDrawerState();
  }
}

//shared/shared.module.ts
import {
  NgModule
} from '@angular/core';
import {
  CommonModule
} from '@angular/common';
import {
  SideDrawerComponent
} from './side-drawer/side-drawer.component';
import {
  NativeScriptUISideDrawerModule
} from "nativescript-pro-ui/sidedrawer/angular";

@NgModule({
  imports: [
    CommonModule,
    NativeScriptUISideDrawerModule
  ],
  declarations: [SideDrawerComponent],
  exports: [
    SideDrawerComponent
  ]
})
export class SharedModule {}

Answer 1

从shared.module.ts

中删除此内容

exports: [
  SideDrawerComponent
]

Answer 2

如果您在@Component上使用相对路径，则需要添加moduleId: module.id,

Ex：相对路径：

@Component({
    selector: 'app-side-drawer',
    moduleId: module.id,
    templateUrl: './side-drawer.component.html',
    styleUrls: ['./side-drawer.component.css']
})

Ex：绝对路径：

@Component({
    selector: 'app-side-drawer',
    templateUrl: './shared/side-drawer/side-drawer.component.html',
    styleUrls: ['./shared/side-drawer/side-drawer.component.css']
})