參考的奧裏利亞組件的視圖模型中的插槽

Question

比方說，你有以下組件：

export class Message { 
    messageTxt: string = ""; 

    attached() { 
     // reference the slot HTMLElement here somehow 
    } 
} 

與下面的模板：

<template> 
    <div> 
     <slot name="trigger"> 
     </slot> 

     <div>${messageTxt}</div> 
    </div> 
</template> 

如上代碼的註釋暗示，我m想知道如何訪問ViewModel中的<slot>元素。我試過爲它添加一個ref屬性，但它的undefined。

我也嘗試添加一個父項，將ref放在父項上，並通過訪問父項的直接子項獲取插槽HTMLElement。它的工作，但我想知道是否有更好的解決方案。

只是要清楚，我需要的元素將取代<slot>。

Answer 1

如果您知道將要在<slot>中的標記的名稱，則可以使用@child解析程序。例如：

信息的視圖模型

import {child} from 'aurelia-framework'; 

export class Element1 { 
    @child('p') myP; 

    attached() { 
    console.log(this.myP); 
    } 
} 

留言的查看

<template> 
    <slot></slot> 
</template> 

使用

<element1> 
    <p>test 1 2 3</p> 
</element1> 

使用@children爲元素的集合：

信息的視圖模型

import {children} from 'aurelia-framework'; 

export class Element1 { 
    @children('ps') myPs = []; 

    attached() { 
    console.log(this.myPs); 
    } 
} 

使用

<element1> 
    <p>test 1 2 3</p> 
    <p>test 1 2 3</p> 
    <p>test 1 2 3</p> 
</element1> 

---

如果你不知道標籤的名字，你可以注入元素並迭代th e children屬性。例如：

留言的查看

<template> 
    <slot name="1"></slot> 
    <slot name="2"></slot> 
</template> 

信息的視圖模型

import {inject} from 'aurelia-framework'; 

@inject(Element) 
export class Element1 { 

    constructor(element) { 
    this.element = element; 
    } 

    attached() { 
    //iterate over this.element.children; 
    } 
} 

使用

<template> 
    <require from="./element1"></require> 

    <element1> 
    <p slot="1">sadfasdf</p> 
    <p slot="2">asdfsadfasd</p> 
    </element1> 
</template>