android - angular2-seed-advanced の Telerik-UI サイドドロワー (Android デバイス)

Question

これを機能させようとしていますが、次のエラーしか表示されません。私は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: RadSideDrawer の RadSideDrawer.initOldDrawer (/data/data/com.yourdomain.appname/files/app/tns_modules/nativescript-telerik-ui/sidedrawer/sidedrawer.js:91:40) で未定義のプロパティ 'android' を読み取ることができません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 で。Page.View._addView (/data/data/com.yourdomain.appname/files) の _addViewCore (/data/data/com.yourdomain.appname/files/app/tns_modules/ui/core/view.js:125:18) /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) エラーコンテキスト: [オブジェクトオブジェクト]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) エラーコンテキスト: [オブジェクトオブジェクト]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) エラーコンテキスト: [オブジェクトオブジェクト]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) エラーコンテキスト: [オブジェクトオブジェクト]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) エラーコンテキスト: [オブジェクトオブジェクト]ViewUtil.createAndAttach (/data/data/com.yourdomain.appname/files) の insertChild (/data/data/com.yourdomain.appname/files/app/tns_modules/nativescript-angular/view-util.js:56:28) /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) エラーコンテキスト: [オブジェクトオブジェクト]ViewUtil.createAndAttach (/data/data/com.yourdomain.appname/files) の insertChild (/data/data/com.yourdomain.appname/files/app/tns_modules/nativescript-angular/view-util.js:56:28) /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;
}

score 2 · Accepted Answer

わかりました、うまくいきました。これを共有したかったのは、正確に簡単ではないか、特に十分に文書化されていないためです...

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;
}

android - angular2-seed-advanced の Telerik-UI サイド ドロワー (Android デバイス)

1 に答える 1

Related

Reference

android - angular2-seed-advanced の Telerik-UI サイドドロワー (Android デバイス)