NativeScript : toggleDrawerState에 함수 오류가 없습니다.

Question

기본 스크립트로 샘플 응용 프로그램을 만들려고합니다. 나는 http://docs.telerik.com/devtools/nativescript-ui/Controls/Angular/SideDrawer/getting-started를 참조하여 다음과 같은 방법으로 sidemenu에 대한 RadSideDrawer을 사용 : 내 app.component.ts에서

<RadSideDrawer [transition]="RevealTransition" #drawer> 
    <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> 
    </StackLayout> 
    <StackLayout tkMainContent> 
    <GridLayout rows="*"> 
    <page-router-outlet ></page-router-outlet> 
    <ActivityIndicator #activityIndicator horizontalAlignment="center" verticalAlignment="center" width="100" height="100" row="0"></ActivityIndicator> 
    </GridLayout> 
    </StackLayout> 
</RadSideDrawer> 

은, 내가 준 :

import {RadSideDrawer} from "nativescript-telerik-ui/sidedrawer"; 

@ViewChild("drawer") drawer : ElementRef; 

및

public toggleDrawer(){ 
     let drawer = <RadSideDrawer>this.drawer.nativeElement; 
     drawer.toggleDrawerState(); 
    } 

문제를 toggleDrawer()를 실행할 때마다 오류가 발생합니다.

drawer.toggleDrawerState not a function. 

무엇이 잘못 될 수 있습니까? this.drawer를 [object Object]로, this.drawer.nativeElement를 ProxyViewContainer (5)로 가져오고 있습니다. 이는 요소를 식별하지만 toggleDrawerState()를 호출 할 수 없음을 의미합니다.

또한 스타일이 왜곡되어 이제 기본보기에 tkDrawerContent가 나열되고 tkMainContent에 지정된 원본 페이지 내용을 볼 수 없습니다.

Answer 1

RadSideDrawer (N + Angular2 프로젝트에서)와 함께 고려해야 할 사항이 있습니다. 당신은 당신은 ChangeDetectorRef를 사용 ngAfterViewInit에서 구성 요소

import { Component, ElementRef, ViewChild, Injectable, OnInit, ChangeDetectorRef } from "@angular/core"; 
..... 
constructor(private page: Page, private _changeDetectionRef: ChangeDetectorRef) { 
     super(); 
} 

3)의 생성자에서 ChangeDetectorRef를 구현해야 typings

import { RadSideDrawerComponent, SideDrawerType } from "nativescript-telerik-ui-pro/sidedrawer/angular"; 

@ViewChild(RadSideDrawerComponent) public drawerComponent: RadSideDrawerComponent; 
private drawer: SideDrawerType; 

2

)를위한 특별한 수입이

1) like

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

4) 마지막으로 드로우 어 방법을 사용합니다.

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

..... 
<Button text="TOGGLE DRAWER" (tap)=toggleDrawer()></Button> 

각도로 RadSideDrawer를 사용하는 전체 예제는 here