0
のを使用してNativeScriptを使用しています。Angular2ネイティブ|フィーチャモジュールのコンポーネントファイルを解決できませんでした
という名前のモジュールを作成しました。共有するコンポーネントを作成することに決めました。ここでは、一般的に使用されるコンポーネントを作成することにしました。
私はRadSideDrawerを使用して「サイドドロワー」と呼ばれるコンポーネントを作成しようとしましたが、コンポーネントを他のコンポーネントの親として使用しました。
しかし、アプリケーションを実行しようとすると、「side-drawer.component.htmlを解決できませんでした」と表示されます。
side-drawerが使用されているフォルダ構造app.module.tsが添付されました&エラーです。
あなたの意見をうかがってください。 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 {}
等[」 ./shared/side-drawer/side-drawer.component.css '] }）** side-drawer.component.ts **では動作するようです。しかし、なぜそれがそうであるのかわからないのですか？ –
投稿してくださいshared.module.ts –
@VivekDoshi興味を示してくれてありがとう、私は質問を更新しました。 –