自定義元素和共享變量中的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，然後我將用它在tip-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. 
    } 
} 

*免責聲明：這是未經測試。

Answer 2

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