Question

这是我的组成部分：

{{#link-to routeName class="list-group-item"}}
  <i class="fa {{icon}} fa-fw"></i>&nbsp; {{text}}
{{/link-to}}

我使用的是：

<div class="list-group">
  {{icon-link routeName="my-account" icon="fa-user" text="Personal details"}}
...
</div>

预期的html是：

<div class="list-group">
  <a class="list-group-item" href="xxx">
    <i class="fa fa-user fa-fw"></i>&nbsp; Personal details
  </a>
...
</div>

但是因为ember将组件包装在div中，所以引导规则不再适用，并且list-group的样式错误。

如果我将组件标记更改为a，并从组件模板中删除link-to，则会失去link-to的灵活性 - 我不知道如何设置属性（href ，class）在包含标签中。

似乎我不能使用Ember组件呢？或者有没有办法告诉ember no将我的组件包装在div或其他任何东西中：为了使CSS工作，不得修改标记结构。

Answer 1

我自己没有尝试过，但显然你可以通过扩展Ember.LinkComponent来创建自定义链接组件。这样的事可能有用......

// app/components/icon-link.js

export default Ember.LinkComponent.extend({
  classNames: ["list-group-item"],

  icon: null,
  text: null,
})

...

// app/templates/components/icon-link.hbs

<i class="fa {{icon}} fa-fw"></i>&nbsp; {{text}}

...

// wherever

{{icon-link 'my-account' icon="fa-user" text="Personal details"}}