Ссылка слот внутри ViewModel из компонента Aurelia

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 задается вопросом, как получить доступ к элементу <slot> в ViewModel. Я пробовал добавить к нему атрибут ref, но это undefined.

Я также попытался добавить к нему родителя, поставив ref на родителя и получив слот HTMLElement, обратившись к прямому родительскому родителю. Это сработало, но мне интересно, есть ли лучшее решение.

Чтобы быть ясным, мне нужен элемент, который заменит <slot>.

Answer 1

Если вы знаете имя тега, который собирается быть в <slot>, вы можете использовать @child распознаватель. Например: ViewModel

сообщение Посмотреть

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 для набора элементов: ViewModel

сообщение в

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> 

---

Если вы не знаете имя тега , вы можете ввести элемент и перебрать его e children Недвижимость. Например: Посмотреть

Сообщение в ViewModel

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