Question

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

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，然后我会在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.
    }
}

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

Aurelia定制元素内部定制元素＆amp;共享变量

2 个答案: