Aurelia定制元素内部的自定义元素和共享变量

Question

如何在自定义元素之间访问和共享变量？我有以下文件......

tip.html

<template>
    <div class="tip-container">
        <content select="tip-trigger"></content>
        <content select="tip-content"></content>
    </div>
</template>

tip.js

export class Tip {}

尖端trigger.html

<template>
    <span class="tip-trigger" click.trigger="showTip()">
        <content></content>
    </span>
</template>

尖端trigger.js

export class TipTrigger {
    showTip() {
        console.debug(this);
    }
}

尖端content.html

<template>
    <span class="tip">
        <content></content>
        <span class="tip__close  tip__close--default">×</span>
        <span class="tip__color"></span>
    </span>
</template>

尖端content.js

export class TipContent {}

在我的Tip班上,我希望有一个变量名visible.当showTip被触发时visible会被设置为true,这我会再使用,以在尖端content.html添加类.如何在这些自定义元素之间共享变量来执行此操作？

我们的想法是创建一个元素来显示提示弹出窗口,其中任何类型的内容都可以作为触发器,并且触发时可以显示任何类型的内容.基本示例:

<tip>
  <tip-trigger><button>?</button></tip-trigger>
  <tip-content><div>Here is some helpful info...</div></tip-content>
</tip>

Answer 1

是不是只要转Tip成类似服务的类然后导入就可以了？

export class Tip {
    constructor() {
        this.visible = false;
    }
    show() {
        this.visible = true;  // Or whatever to show the content
    }
    hide() {
        this.visible = false;
    }
}

然后：

import {inject} from 'aurelia-framework';  
import {Tip} from './tip';

@inject(Tip)
export class TipTrigger {
    constructor(tip) {
        this.tip = tip;
    }
    showTip() {
        this.tip.show();
        // Or I suppose you could access 'visible' directly
        // but I like the implementation details a method call offers.
    }
}

*免责声明：未经测试。