アウレリア成分。タイプスクリプト内のコンポーネントの関数にアクセスする方法はありますか？

Question

ビューからコンポーネント関数を呼び出す方法はありますか？のラインの何か。

コンポーネントのshow()機能を私のViewPageから呼び出す方法を探しています。

コンポーネント

//component.html 
<template> 
    <div id="sidebar"></div> 
</template> 

// component.css 
#sidebar { 
    display: none; 
} 

// component.ts 
import {bindable} from 'aurelia-framework'; 

export class Sidebar { 

    @bindable data: Array<string>; 

    show =() : void => { 
     // Shows this specific side bar 
    } 

    hide =() : void => { 
     // Hides this specific side bar 
    } 
} 

ビュー

// view.html 
<template> 
    <require from="./sidebar"></require> 
    <sidebar data.bind="data"></sidebar> 
    <button click.delegate="showSidebar()"></button> 
<template> 

// view.ts 
export class ViewPage { 

    data: Array<string> = ["Hello", "I", "Am", "Sidebar", "Content"]; 

    showSidebar =() : void => { 
     // how to show the side bar component here?? 
     // I need something like sidebar.show();? 
    } 
} 

Answer 1

だから、その間に、私は周りに尋ねると、このための解決策を見つけてきました。下記参照。

コンポーネント

<template> 
    <div show.bind="visible" id="sidebar"></div> 
</template> 

export class Sidebar { 

    visible: false; 

    show =() : void => { 
     this.visible = true; 
    } 

    hide =() : void => { 
     this.visible = false; 
    } 
} 

ビュー

<template> 
    <sidebar sidebar.ref="sidebar" data.bind="data"></sidebar> 
    <button click.delegate="show()"></button> 
    <button click.delegate="hide()"></button> 
<template> 

import {Sidebar} from './sidebar'; 

export class ViewPage { 

    sidebar: Sidebar; 

    show =() : void => { 
     this.sidebar.show(); 
    } 

    hide =() : void => { 
     this.sidebar.hide(); 
    } 
} 

注意sidebar.ref="sidebar"。これは、コンポーネントとビューを結合します。最初のsidebar.refがコンポーネント名で、二重引用符の間にあるsidebarは、ビューのプロパティ名です。