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

tip-trigger.html

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

tip-trigger.js

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

提示内容.html

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

提示内容.js

export class TipContent {}

在我的Tip 类中，我想要一个变量名visible。当showTip 被触发时，visible 将设置为 true，然后我将使用它在tip-content.html 中添加一个类。我如何在这些自定义元素之间共享变量来做到这一点？

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

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

Answer 1

Here 是您在 Plunker 中遇到的问题的解决方案。

请注意，tip-trigger 和 tip-content 元素只是模板的可替换部分。它们本身不需要成为组件（这让我在"original" custom elements article 中很困惑）。

app.html:

<template>
  <require from="tip"></require>
  <tip>
      <tip-trigger><button>?</button></tip-trigger>
      <tip-content><div>Here is some helpful info...</div></tip-content>
  </tip>
</template>

tip.html：

<template>
    <div class="tip-container">
      <div>
         <div click.trigger="showContent()">
           <content select="tip-trigger"></content>
         </div>
      </div>
      <div show.bind="contentVisible">
        tip content:
        <content select="tip-content"></content>
      </div>
    </div> 
</template>

tip.js：

export class Tip {
  showContent(){
    this.contentVisible = !this.contentVisible;
  }
}

Answer 2

你只需要把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.
    }
}

*免责声明：这是未经测试的。