Nativescript ActionBarカスタムコンポーネント

Question

アプリの別の場所でアクションバーとそのロジックを再利用するために、hereのようにカスタムコンポーネントを作成しようとしています。

/components/header/header.xml

<ActionBar title="Title" class="{{ 'mode' == dark ? 'bg-dark' : 'bg-white' }}" loaded="loaded"> 
</ActionBar> 

/components/header/header.ts

exports.loaded = (args) => { 
    let page = <Page> args.object; 
    let pageObservable = new Observable({ 
     'mode' : page.get('mode') 
    }); 
    page.bindingContext = pageObservable; 
} 

私は、このようにそれを呼び出すコンポーネントを使用するようにしてください：ここで は、私はセットアップコンポーネントを持っているものであるが

some_view.xml

<Page 
xmlns="http://schemas.nativescript.org/tns.xsd" 
xmlns:header="components/header"> 

<header:header mode="dark"/> 
<StackLayout>..</StackLayout> 
... 
</Page> 

、 `some-view.xml 'に移動しました。次のエラーが表示されます：

Calling js method onCreateView failed 
TypeError: Cannot read property frame of 'undefined' 
File "data...../ui/action-bar/action-bar.js" line: 146 

何か問題がありますか？ ActionBarに基づいてカスタムコンポーネントを作成することに成功しましたか？

Answer 1

おそらく問題は、/components/header/header.tsファイルのloadedメソッドでPageインスタンスを取得しようとしていることです。 argsはPageの代わりにActionBarへの参照を返します。一方、TypeScriptを使用している間は、イベントはexport function loaded(args){...}のように定義する必要があります。上記のコードではJavaScriptシンタックスを使用しています。私はサンプルコードを添付しています。そこには、カスタムコンポーネントの作成方法が示されています。

コンポーネント/アクションバー/アクションbar.xml

<ActionBar loaded="actionbarLoaded" title="Title" icon=""> 
    <NavigationButton text="Back" icon="" tap="" /> 
    <ActionBar.actionItems> 
     <ActionItem icon="" text="Left" tap="" ios.position="left" /> 
     <ActionItem icon="" text="Right" tap="" ios.position="right" /> 
    </ActionBar.actionItems> 
</ActionBar> 

コンポーネント/アクションバー/アクションbar.ts

export function actionbarLoaded(args){ 
    console.log("actionbar loaded"); 
} 

主page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" xmlns:AB="component/action-bar"> 
<Page.actionBar> 
    <AB:action-bar /> 
</Page.actionBar> 
    <StackLayout> 
    <Label text="Tap the button" class="title"/> 
    <Button text="TAP" tap="{{ onTap }}" /> 
    <Label text="{{ message }}" class="message" textWrap="true"/> 
    </StackLayout> 
</Page> 

メインページ.ts

import { EventData } from 'data/observable'; 
import { Page } from 'ui/page'; 
import { HelloWorldModel } from './main-view-model'; 

// Event handler for Page "navigatingTo" event attached in main-page.xml 
export function navigatingTo(args: EventData) { 
    // Get the event sender 
    let page = <Page>args.object; 
    page.bindingContext = new HelloWorldModel(); 
}