Question

我有一个具有锚定标记单击的组件，该组件会打开一个模态，模型内是youtube。当模式打开时，我希望更改YouTube网址中的ID以播放正确的视频，但是我在弄清楚如何完成此操作时遇到了麻烦。我添加了具有所需ID的数据属性，并希望将其传递到组件中以将其添加到url中。我当时想可以更新组件JS文件中的ID。

src =“ https://www.youtube.com/embed/{{id}}?rel=0&showinfo=0”

下面是把手模板和JS。

{{#bs-modal-simple open=modal1 title="Simple Dialog" size="lg" position="center" onHidden=(action (mut modal1) false)}}
  {{yt-ad-videos}}
{{/bs-modal-simple}}

JS：

import Component from '@ember/component';
export default Component.extend({
  click(evt){
    let ytId = evt.target.getAttribute('data-id');
    this.set('id', ytId);
  },
  id: null,
  actions: {
    openModal() {
      this.get('onOpen')();
    }
  }
});

Answer 1

嗯，您从哪里获得数据？这段代码没有什么意义：

click(evt){
  let ytId = evt.target.getAttribute('data-id');
  this.set('id', ytId);
},

您在哪里设置data-id？

通常，您会这样调用组件：

{{my-component videoId="TheId"}}

或包含动态数据的示例：

{{my-component videoId=model.youtubeId}}

然后在my-component.hbs内将其包装为模态并使用videoId。您可以将videoId直接传递给另一个组件。

<button onclick={{action (mut modal1) true}}>Open</button>
{{#bs-modal-simple
  open=modal1
  title="Simple Dialog"
  size="lg"
  position="center"
  onHidden=(action (mut modal1) false)
}}
  {{ember-youtube ytid=videoId}}
{{/bs-modal-simple}}

在这里，我使用了ember-youtube组件，因为我不知道您的yt-ad-videos是如何实现的。您需要查看它的内部以弄清楚如何传递ID。

旁注：建议您不要在元件标签上使用click()事件。改用闭包动作，就像我对<button>所做的那样打开模态。

Answer 2

为索引添加控制器使我可以传递所需的数据并解决了问题。

如何在EmberJS中将属性从一个组件传递到另一个组件？

2 个答案: