{NativeScript} SideDrawerエラー "モジュール 'DrawerContent'の要素にui/drawer-content 'が見つかりません"

Question

NativeScriptの初心者ですが、Web全体を検索していますが、繰り返しが多い/私がウェブ上で見つけた例はかなり矛盾していました。

ここでは、 "nativescript-telerik-ui/sidedrawer"から簡単なSideDrawerを実装しようとしていますが、悲惨に失敗します。私はsidedrawerの「id」属性にアクセスすることができないようメインpage.tsファイル内

• 、（常にundefinedを返す）
• 実行時に：

  注意すべきいくつかのポイント（Androidの上で、まだiOSのをしようとしなかった）、私は次のエラーを得た：「モジュール 『UI /引き出し-コンテンツ』要素が見つかりません 『DrawerContent』」の下

は、私のファイルは+コードです：

package.json

{ 
    "nativescript": { 
     "id": "org.nativescript.githubreader", 
     "tns-ios": { 
      "version": "1.7.0" 
     }, 
     "tns-android": { 
      "version": "1.7.1" 
     } 
    }, 
    "dependencies": { 
     "github-api": "^0.11.2", 
     "lodash": "^4.10.0", 
     "nativescript-telerik-ui": "^1.0.1", 
     "tns-core-modules": "1.7.1" 
    }, 
    "devDependencies": { 
     "nativescript-dev-typescript": "^0.3.0", 
     "typescript": "^1.8.9" 
    } 
} 

メインpage.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" 
    xmlns:drawer="nativescript-telerik-ui/sidedrawer" 
    loaded="loaded" 
    navigatingTo="navigatingTo"> 

    <drawer:rad-side-drawer id="sideDrawer"> 
     <drawer:rad-side-drawer.mainContent> 

     <!-- Home page contents --> 
     <stack-layout> 
      <image src="https://i.imgur.com/LY3cb3A.png" id="logo" tap="" height="100" margin="20 0 0 0" /> 
      <label text="Welcome to the NativeScript drawer template! This is the home page. Try tapping the logo." margin="20" horizontalAlignment="center" textWrap="true" /> 
     </stack-layout> 

     </drawer:rad-side-drawer.mainContent> 
     <drawer:rad-side-drawer.drawerContent> 
      <widgets:drawer-content /> 
     </drawer:rad-side-drawer.drawerContent> 
    </drawer:rad-side-drawer> 

    <StackLayout orientation="vertical"> 
     <Label text="{{ message }}" class="message" textWrap="true"/> 
    </StackLayout> 
</Page> 

メインpage.ts

import { EventData } from "data/observable"; 
import { Page } from "ui/page"; 
import { MainModel } from "../../models/main-view"; 

let drawer:any; 

// Event handler for Page "navigatingTo" event attached in main-page.xml 
export function navigatingTo(args: EventData) { 
    // Get the event sender 
    const page = <Page>args.object; 
    page.bindingContext = new MainModel(); 
    drawer = page.getViewById("sideDrawer"); 
    console.log("navigatingTo"); 
    console.log(drawer); 
} 

export function loaded(args: EventData) { 
    const page = <Page>args.object; 
    drawer = page.getViewById("sideDrawer"); 
    console.log("Loaded"); 
    console.log(drawer); 
}; 

export function toggleDrawer() { 
    if(drawer) { 
     drawer.toggleDrawerState(); 
    } 
} 

私は本当にだろうが立ち往生していますいくつかのより多くの経験の助けに感謝問題の人たち。

NativeScriptは素晴らしく、実際に何か良いものを構築することを楽しみにしています。

あなたのモジュールのUI /引き出し-コンテンツ「未装着の問題のために）、いくつかの答えを読むことを楽しみ、これまで読んでくれてありがとう:)

Answer 1

1.探している：

あなたはウィジェットを使用しています： drawer-contentこのウィジェットの参照はありません。 外部ウィジェットを読み込む代わりに、カスタムウィジェットを作成できます。たとえば はこれで非参照さウィジェットを置き換える：

<StackLayout cssClass="drawerContent"> 
     <StackLayout> 
      <Label text="Navigation Menu"/> 
     </StackLayout> 
     <StackLayout cssClass="drawerMenuContent"> 
      <Label text="Primary" /> 
      <Label text="Social" /> 
      <Label text="Promotions" /> 
      <Label text="Labels" /> 
     </StackLayout> 
    </StackLayout> 

2）あなたの引き出しの未定義のIDを持つ問題について、あなたはメインpage.xml

であなたの次のコードの一部を削除する必要があります

<StackLayout orientation="vertical"> 
    <Label text="{{ message }}" class="message" textWrap="true"/> 
</StackLayout> 

そして引き出し内部のあなたの最初のページのコンテンツを実装：RadSideDrawer.mainContent（あなたがすでに行っているように）。 理由：sidedrawerは、xmlツリーの他のUI要素と同じレベルにあることはできません。私は次のチュートリアルhere