我正在尝试使用angular开发nativescript中的应用程序
我想使用telerik-ui的侧抽屉像过滤面板一样,我将在主要内容文本区域中显示一些数据。问题是我启动代码时没有错误,除了没有sideDrawer的事实所有。我不知道如何调试它
我目前正在尝试使用此示例对我的应用程序进行一些修改(仅文件名称):
http://docs.telerik.com/devtools/nativescript-ui/Controls/Angular/SideDrawer/getting-started
filter.component.html:
<RadSideDrawer showOverNavigation="true" tkExampleTitle tkToggleNavButton class="page">
<StackLayout tkDrawerContent class="sideStackLayout">
<StackLayout class="sideTitleStackLayout">
<Label text="Navigation Menu"></Label>
</StackLayout>
<StackLayout class="sideStackLayout">
<Label text="Primary" class="sideLabel sideLightGrayLabel"></Label>
<Label text="Social" class="sideLabel"></Label>
<Label text="Promotions" class="sideLabel"></Label>
<Label text="Labels" class="sideLabel sideLightGrayLabel"></Label>
<Label text="Important" class="sideLabel"></Label>
<Label text="Starred" class="sideLabel"></Label>
<Label text="Sent Mail" class="sideLabel"></Label>
<Label text="Drafts" class="sideLabel"></Label>
</StackLayout>
<Label text="Close Drawer" color="lightgray" padding="10" style="horizontal-align: center" (tap)="onCloseDrawerTap()"></Label>
</StackLayout>
<StackLayout tkMainContent>
<Label [text]="mainContentText" textWrap="true" class="drawerContentText"></Label>
<Button text="OPEN DRAWER" (tap)="openDrawer()" class="drawerContentButton"></Button>
</StackLayout>
</RadSideDrawer>
filter.component.ts:
import { Component, ViewChild, OnInit, AfterViewInit, ChangeDetectorRef } from "@angular/core";
import { Page } from "ui/page";
import { ActionItem } from "ui/action-bar";
import { Observable } from "data/observable";
import { RadSideDrawerComponent, SideDrawerType } from "nativescript-telerik-ui/sidedrawer/angular";
import { RadSideDrawer } from 'nativescript-telerik-ui/sidedrawer';
@Component({
moduleId: module.id,
selector: "tk-sidedrawer-getting-started",
templateUrl: 'filter.component.html',
styleUrls: ['filter.component.css']
})
export class SideDrawerGettingStartedComponent implements AfterViewInit, OnInit {
private _mainContentText: string;
constructor(private _changeDetectionRef: ChangeDetectorRef) {
}
@ViewChild(RadSideDrawerComponent) public drawerComponent: RadSideDrawerComponent;
private drawer: RadSideDrawer;
ngAfterViewInit() {
this.drawer = this.drawerComponent.sideDrawer;
this._changeDetectionRef.detectChanges();
}
ngOnInit() {
this.mainContentText = "SideDrawer for NativeScript can be easily setup in the HTML definition of your page by defining tkDrawerContent and tkMainContent. The component has a default transition and position and also exposes notifications related to changes in its state. Swipe from left to open side drawer.";
}
get mainContentText() {
return this._mainContentText;
}
set mainContentText(value: string) {
this._mainContentText = value;
}
public openDrawer() {
this.drawer.showDrawer();
}
public onCloseDrawerTap() {
this.drawer.closeDrawer();
}
}
filter.module.ts:
import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NativeScriptUISideDrawerModule } from "nativescript-telerik-ui/sidedrawer/angular";
import { FilterRoutingModule } from "./filter.routing";
import { SideDrawerGettingStartedComponent } from "./filter.component";
@NgModule({
imports: [
NativeScriptModule,
FilterRoutingModule,
NativeScriptUISideDrawerModule
],
declarations: [
SideDrawerGettingStartedComponent
],
schemas: [
NO_ERRORS_SCHEMA
]
})
export class FilterModule { }
filter.routing.ts:
import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { SideDrawerGettingStartedComponent } from "./filter.component";
const routes: Routes = [
{ path: "filter", component: SideDrawerGettingStartedComponent }
];
@NgModule({
imports: [NativeScriptRouterModule.forChild(routes)],
exports: [NativeScriptRouterModule]
})
export class FilterRoutingModule { }
filter.component.css:
button {
font-size: 15;
horizontal-align: center;
}
.mainContentText {
font-size: 13;
padding: 10;
}
.mainContentButton {
margin: 10;
horizontal-align: left;
}
.drawerContentButton {
color: yellowgreen;
}
.sideStackLayout {
background-color: gray;
}
.sideTitleStackLayout {
height: 56;
text-align: center;
vertical-align: center;
}
.sideLabel {
padding: 10;
}
.sideLightGrayLabel {
background-color: lightgray;
}
当我转到此过滤页面时,侧抽屉根本不显示。 我的应用程序的结构与此类似:https://github.com/NativeScript/sample-Groceries
任何帮助都将不胜感激。
答案 0 :(得分:0)
<RadSideDrawer #drawer showOverNavigation="true" tkExampleTitle tkToggleNavButton class="page">
并像这样使用@ViewChild:
@ViewChild('drawer') public drawerComponent: RadSideDrawerComponent;
如果您有解决方案,请告诉我。
答案 1 :(得分:0)
我设法通过在package.json文件中添加一些依赖项来解决我的问题 为此,我创建了一个新的空白生成项目并安装了RadSideDrawer,我比较了我所拥有和升级的依赖项并添加了一些(例如我的依赖项列表中没有@ angular / animations)