angular2-seed-advanced（Android 设备）中的 Telerik-UI 侧抽屉
Posted
技术标签:
【中文标题】angular2-seed-advanced（Android 设备）中的 Telerik-UI 侧抽屉【英文标题】：Telerik-UI Side Drawer in angular2-seed-advanced (Android Device) 【发布时间】：2017-01-22 11:35:04 【问题描述】：我试图让它工作，但它只会给我以下错误。我为 nativescript-groceries 应用程序做了几乎相同的事情，但是 angular2-seed-advanced 的架构有些不同，似乎是 nativescript 和种子项目和 Telerik-ui 之间某处的依赖注入问题。
感谢任何帮助：
异常：错误 /data/data/com.yourdomain.appname/files/app/app/components/app.component.tns.html:0:0 原始异常：TypeError：无法读取未定义的属性“android” 原始堆栈跟踪： TypeError：无法读取未定义的属性“android” 在 RadSideDrawer.initOldDrawer (/data/data/com.yourdomain.appname/files/app/tns_modules/nativescript-telerik-ui/sidedrawer/sidedrawer.js:91:40) 在 RadSideDrawer._createUI (/data/data/com.yourdomain.appname/files/app/tns_modules/nativescript-telerik-ui/sidedrawer/sidedrawer.js:147:18) 在 RadSideDrawer.View._onContextChanged (/data/data/com.yourdomain.appname/files/app/tns_modules/ui/core/view.js:197:14) 在 RadSideDrawer.View._onAttached (/data/data/com.yourdomain.appname/files/app/tns_modules/ui/core/view.js:149:14) 在 Page.View._addViewCore (/data/data/com.yourdomain.appname/files/app/tns_modules/ui/core/view.js:125:18) 在 Page.View._addView (/data/data/com.yourdomain.appname/files/app/tns_modules/ui/core/view-common.js:952:14) 在 Page.Object.defineProperty.set [作为内容] (/data/data/com.yourdomain.appname/files/app/tns_modules/ui/content-view/content-view.js:19:22) 在 ViewUtil.insertChild (/data/data/com.yourdomain.appname/files/app/tns_modules/nativescript-angular/view-util.js:56:28) 在 ViewUtil.createAndAttach (/data/data/com.yourdomain.appname/files/app/tns_modules/nativescript-angular/view-util.js:103:18) 在 ViewUtil.createView (/data/data/com.yourdomain.appname/files/app/tns_modules/nativescript-angular/view-util.js:110:25) 错误上下文： [对象对象]
这是我的更改
nativescript/package.json
### Added dependency
"nativescript-telerik-ui": "^1.3.1",
nativescript/app/native.module.ts
...
import SIDEDRAWER_PROVIDERS from 'nativescript-telerik-ui/sidedrawer/angular';
...
@NgModule(
...
providers: [
NS_ANALYTICS_PROVIDERS,
### Added sidedrawer providers
SIDEDRAWER_PROVIDERS,
provide: RouterExtensions, useClass: TNSRouterExtensions
],
...
)
export class NativeModule
nativescript/app/pages/app/app.component.ts：
...
import Inject, ChangeDetectorRef from '@angular/core';
...
import Page from 'ui/page';
...
export class NSAppComponent extends AppComponent
constructor(
@Inject(Page) private _page: Page,
private _changeDetectionRef: ChangeDetectorRef,
@Inject(AnalyticsService) public analytics: AnalyticsService,
@Inject(LogService) private log: LogService,
@Inject(Store) private store: Store<any>,
@Inject(Router) private router: Router)
// ### ADDED Page and ChangeDetectionRef
super(_page, _changeDetectionRef, analytics, log);
...
nativescript/app/app/components/app.component.ts
...
import ViewChild, ChangeDetectorRef, ChangeDetectionStrategy, AfterViewInit from '@angular/core';
...
import
SIDEDRAWER_DIRECTIVES,
RadSideDrawerComponent,
SideDrawerType
from 'nativescript-telerik-ui/sidedrawer/angular';
import DrawerTransitionBase, PushTransition from 'nativescript-telerik-ui/sidedrawer';
import Page from 'ui/page';
...
@BaseComponent(
moduleId : module.id,
selector : 'sd-app',
templateUrl : 'app.component.html',
directives : [SIDEDRAWER_DIRECTIVES],
changeDetection: ChangeDetectionStrategy.Default // Everything else uses OnPush
)
export class AppComponent implements AfterViewInit
private _currentNotification: string;
private _sideDrawerTransition: DrawerTransitionBase;
@ViewChild(RadSideDrawerComponent) public drawerComponent: RadSideDrawerComponent;
private drawer: SideDrawerType;
constructor(
private page: Page,
private changeDetectionRef: ChangeDetectorRef,
public analytics: AnalyticsService,
public logger: LogService)
logger.debug(`Config env: $Config.ENVIRONMENT().ENV`);
this.page.on("loaded", this.onLoaded, this);
ngAfterViewInit()
this.drawer = this.drawerComponent.sideDrawer;
this.changeDetectionRef.detectChanges();
public onLoaded(args)
this._sideDrawerTransition = new PushTransition();
public get sideDrawerTransition(): DrawerTransitionBase
return this._sideDrawerTransition;
public get currentNotification(): string
return this._currentNotification;
public openDrawer()
this.drawer.showDrawer();
public onDrawerOpening()
console.log("Drawer opening");
this._currentNotification = "Drawer opening";
public onDrawerOpened()
console.log("Drawer opened");
this._currentNotification = "Drawer opened";
public onDrawerClosing()
console.log("Drawer closing");
this._currentNotification = "Drawer closing";
public onDrawerClosed()
console.log("Drawer closed");
this._currentNotification = "Drawer closed";
nativescript/app/app/components/app.component.tns.html
<RadSideDrawer #drawer>
<StackLayout tkDrawerContent class="sideStackLayout">
<StackLayout class="sideTitleStackLayout">
<Label text="Navigation Menu"></Label>
</StackLayout>
<StackLayout class="sideStackLayout">
<Label text="MenuItemA" ></Label>
<Label text="MenuItemB" ></Label>
<Label text="MenuItemC" ></Label>
</StackLayout>
</StackLayout>
<StackLayout tkMainContent>
<!-- nested original content in Drawer -->
<ActionBar title="Test" class="action-bar">
<ActionItem ios.position="right" android.position="popup">
<Button [text]="'MENU' | translate" (tap)=openDrawer() class="action-btn"></Button>
</ActionItem>
<ActionItem nsRouterLink="/about" ios.position="right" android.position="popup">
<Button [text]="'ABOUT' | translate" class="action-btn"></Button>
</ActionItem>
</ActionBar>
<StackLayout class="container">
<lang-switcher></lang-switcher>
<ScrollView>
<page-router-outlet></page-router-outlet>
</ScrollView>
</StackLayout>
</StackLayout>
nativescript/app/app/components/app.component.tns.css
.sideStackLayout
background-color: white;
【问题讨论】：
您好，来自 NativeScript 团队的开发人员。今天我们发布了最新的 1.4.0 版本的 nativescript-telerik-ui 插件，你能尝试用最新版本测试描述的问题吗？这里可以看到最新的sdk示例github.com/telerik/nativescript-ui-samples-angular 嗨弗拉基米尔。我尝试了 1.4.0，但问题仍然存在。但我意识到这可能是添加抽屉的错误位置。 @Inject(Page) 可能仅适用于通过好的，让它工作并想分享这个，因为它不是很简单，也不是特别有据可查...
随着 nativescript-telerik-ui 1.4.1 和 Angular 2.0.0 最终版本的发布，这实际上非常容易。
nativescript/package.json
### Added dependency
"nativescript-telerik-ui": "^1.4.1",
nativescript/app/native.module.ts
...
import SIDEDRAWER_DIRECTIVES from 'nativescript-telerik-ui/sidedrawer/angular';
...
@NgModule(
...
declarations: [
SIDEDRAWER_DIRECTIVES, ### allows usage of <RadSideDrawer> in pages
HomeComponent,
AboutComponent
],
...
)
export class NativeModule
nativescript/app/pages/app/app.component.ts：
no changes - drawer is supposed to be used per page
nativescript/app/app/components/app.component.ts
no changes - drawer is supposed to be used per page
nativescript/app/app/components/about/about.component.ts
import ViewChild, ChangeDetectorRef, Inject from '@angular/core';
...
import RadSideDrawerComponent, SideDrawerType from 'nativescript-telerik-ui/sidedrawer/angular';
import DrawerTransitionBase, PushTransition from 'nativescript-telerik-ui/sidedrawer';
import Page from 'ui/page';
...
export class AboutComponent
private _currentNotification: string;
private _sideDrawerTransition: DrawerTransitionBase;
@ViewChild(RadSideDrawerComponent) public drawerComponent: RadSideDrawerComponent;
private drawer: SideDrawerType;
constructor(
private page: Page,
private changeDetectionRef: ChangeDetectorRef )
this.page.on("loaded", this.onLoaded, this);
ngAfterViewInit()
this.drawer = this.drawerComponent.sideDrawer;
this.changeDetectionRef.detectChanges();
public onLoaded(args)
this._sideDrawerTransition = new PushTransition();
public get sideDrawerTransition(): DrawerTransitionBase
return this._sideDrawerTransition;
public get currentNotification(): string
return this._currentNotification;
public openDrawer()
this.drawer.showDrawer();
public onDrawerOpening()
console.log("Drawer opening");
this._currentNotification = "Drawer opening";
public onDrawerOpened()
console.log("Drawer opened");
this._currentNotification = "Drawer opened";
public onDrawerClosing()
console.log("Drawer closing");
this._currentNotification = "Drawer closing";
public onDrawerClosed()
console.log("Drawer closed");
this._currentNotification = "Drawer closed";
nativescript/app/app/components/app.component.tns.html
<RadSideDrawer #drawer
(drawerOpening)="onDrawerOpening()"
(drawerOpened)="onDrawerOpened()"
(drawerClosing)="onDrawerClosing()"
(drawerClosed)="onDrawerClosed()"
[transition]="sideDrawerTransition">
<StackLayout tkDrawerContent class="sideStackLayout">
<Label text="MenuItemA" ></Label>
<Label text="MenuItemB" ></Label>
<Label text="MenuItemC" ></Label>
</StackLayout>
<StackLayout tkMainContent>
<!-- nested original content in Drawer -->
<ActionBar title="Test" class="action-bar">
<ActionItem ios.position="right" (tap)=openDrawer() android.position="popup">
<Button [text]="'MENU' | translate" class="action-btn"></Button>
</ActionItem>
<ActionItem nsRouterLink="/about" ios.position="right" android.position="popup">
<Button [text]="'ABOUT' | translate" class="action-btn"></Button>
</ActionItem>
</ActionBar>
<StackLayout>
<Label text="Angular 2 Seed Advanced is ...
...
</StackLayout>
</StackLayout>
nativescript/app/app/components/app.component.tns.css
.sideStackLayout
background-color: white;
【讨论】：
您好，让您知道 RadSideDrawer 声明中的“#drawer”不是必需的，它是 Angular 2 RC 早期版本的一些 NativeScript-UI 文档中遗留下来的。跨度>以上是关于angular2-seed-advanced（Android 设备）中的 Telerik-UI 侧抽屉的主要内容，如果未能解决你的问题，请参考以下文章
TypeError: undefined is not an object , item is from an array from an API
[Creating an image format with an unknown type is an error] on cordova, ios 10
使用 PHAssets 时出现此错误：Creating an image format with an unknown type is an error