Aurelia-Komponente. Gibt es eine Möglichkeit, auf eine Funktion einer Komponente im Typoskript zuzugreifen

Question

Gibt es eine Möglichkeit, eine Komponentenfunktion aus einer Ansicht aufzurufen? Etwas in den Linien von.

Ich bin auf der Suche nach einer Möglichkeit, die show() Funktion auf der Komponente von meinem ViewPage aufrufen.

Komponente

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

Ansicht

// 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

So in der Zwischenzeit habe ich um gebeten und eine Lösung dafür gefunden. Siehe unten.

Komponente

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

export class Sidebar { 

    visible: false; 

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

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

Ansicht

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

Hinweis der sidebar.ref="sidebar". Dies bindet die Komponente und die Ansicht zusammen. Wo der erste sidebar.ref ist der Name der Komponente und der zweite sidebar zwischen den Zitaten ist der Name der Eigenschaft auf Ihrer Ansicht.