Aurelia 组件。有没有办法在打字稿中访问组件的功能

Question

有没有办法从一个视图中调用组件函数？有点像。

我正在寻找一种方法来从我的ViewPage 调用组件上的show() 函数。

组件

//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 是您视图上的属性名称。