Question

假设您有以下组件：

export class Message {
    messageTxt: string = "";

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

使用以下模板：

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

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

正如代码中的注释所暗示的那样，我想知道如何访问ViewModel中的<slot>元素。我尝试为其添加ref属性，但它是undefined。

我还尝试添加父级，将ref放在父级上，并通过访问父级的直接子级获取插槽HTMLElement。它有效，但我想知道是否有更好的解决方案。

为了清楚起见，我需要将替换<slot>。

的元素

Answer 1

如果您知道将在package swing; import javax.swing.*; import java.awt.*; import java.awt.event.ActionEvent; import java.awt.event.KeyEvent; import java.awt.image.BufferedImage; //an example of the problem where the keyboard stops receiving input randomly public class SOMacKeyBindings extends JPanel { private BufferedImage image; //sprite private Point point = new Point(200, 200); private int steps = 5; private class KeyAction extends AbstractAction { private Runnable runnable; public KeyAction(Runnable runnable) { this.runnable = runnable; } @Override public void actionPerformed(ActionEvent e) { runnable.run(); } } public SOMacKeyBindings() { JFrame frame = new JFrame(); frame.add(this); frame.pack(); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setResizable(false); frame.setLocationRelativeTo(null); frame.setVisible(true); //makes the sprite a red square image = new BufferedImage(50, 50, BufferedImage.TYPE_INT_ARGB); int[] redPixels = new int[50 * 50]; for (int i = 0; i < redPixels.length; i++) { redPixels[i] = 0xffff0000; } image.setRGB(0, 0, 50, 50, redPixels, 0, 50); initializeKeys(); } @Override public Dimension getPreferredSize() { return new Dimension(800, 600); } //sets up Key Bindings private void initializeKeys() { final String W = "W", A = "A", S = "S", D = "D", PRESSED = "PRESSED"; InputMap inputMap = this.getInputMap(JPanel.WHEN_IN_FOCUSED_WINDOW); ActionMap actionMap = this.getActionMap(); inputMap.put(KeyStroke.getKeyStroke(KeyEvent.VK_W, 0, false), W + PRESSED); inputMap.put(KeyStroke.getKeyStroke(KeyEvent.VK_A, 0, false), A + PRESSED); inputMap.put(KeyStroke.getKeyStroke(KeyEvent.VK_S, 0, false), S + PRESSED); inputMap.put(KeyStroke.getKeyStroke(KeyEvent.VK_D, 0, false), D + PRESSED); actionMap.put(W + PRESSED, new KeyAction(() -> { point.y -= steps; repaint(); })); actionMap.put(A + PRESSED, new KeyAction(() -> { point.x -= steps; repaint(); })); actionMap.put(S + PRESSED, new KeyAction(() -> { point.y += steps; repaint(); })); actionMap.put(D + PRESSED, new KeyAction(() -> { point.x += steps; repaint(); })); } @Override public void paintComponent(Graphics g) { super.paintComponent(g); g.drawImage(image, point.x, point.y, null); } public static void main(String[] args) { SwingUtilities.invokeLater(() -> new SOMacKeyBindings()); } }中的标记的名称，则可以使用<slot>解析程序。例如：

消息的ViewModel

@child

讯息视图

import {child} from 'aurelia-framework';

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

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

<强>用法

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

将<element1> test 1 2 3 </element1>用于元素集合：

消息的ViewModel

@children

<强>用法

import {children} from 'aurelia-framework';

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

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

如果您不知道标记的名称，则可以注入该元素并迭代<element1> test 1 2 3 test 1 2 3 test 1 2 3 </element1>属性。例如：

讯息视图

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

引用Aurelia组件的ViewModel内的一个槽

1 个答案: