typescript - 奥里利亚组件。有没有办法访问 typescript 中组件的功能

Question

有没有办法从 View 中调用组件函数？类似的东西。

我正在寻找一种从我的 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"。这将组件和 View 绑定(bind)在一起。其中第一个 sidebar.ref 是组件名称，引号之间的第二个 sidebar 是 View 上的属性名称。