奥雷利亚成分。有没有办法访问typescript中组件的函数

有没有一种方法可以从视图调用组件函数？类似的东西

我正在寻找从我的

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

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

export class Sidebar {

    visible: false;

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

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

//component.html
//component.css
#边栏{
显示：无；
}
//组件技术
从“aurelia框架”导入{bindable}；
导出类边栏{
@可绑定数据：数组；
show=（）：void=>{
//显示此特定的侧栏
}
隐藏=（）：无效=>{
//隐藏此特定的侧栏
}
}

看法

//view.html
//view.ts
导出类视图页{
数据：数组=[“你好”、“我”、“我”、“侧边栏”、“内容”]；
showSidebar=（）：void=>{
//如何在此处显示侧栏组件？？
//我需要边栏之类的东西。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
    }
}

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

export class Sidebar {

    visible: false;

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

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

导出类边栏{
可见：假；
show=（）：void=>{
可见=真实；
}
隐藏=（）：无效=>{
可见=假；
}
}

看法

从“./Sidebar”导入{Sidebar}；
导出类视图页{
边栏：边栏；
show=（）：void=>{
this.sidebar.show（）；
}
隐藏=（）：无效=>{
this.sidebar.hide（）；
}
}

---

注意

侧栏。ref=“sidebar”

。这将组件和视图绑定在一起。第一个

sidebar.ref

是组件名称，引用之间的第二个

sidebar

是视图中的属性名称。

Hi Tom，这是正确的使用方法-一个很好的替代方法，我们在项目中采用的方法是创建一个服务来管理侧边栏的状态（包括它是否可见）并将其注入到我们希望控制侧栏的视图中。这样做的额外好处是在切换视图时不会丢失侧栏上下文（假设侧栏是视图的子组件）。