Ссылка на слот внутри 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>

Как следует из комментария в коде, мне интересно, как получить доступ к <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>

---

Если вы не знаете имя тега, вы можете вставить элемент и выполнить итерацию по children имущество. Например:

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

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

ViewModel сообщения

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>