javascript - 在 emberJS 中动态更改链接的颜色

Question

这是我的 app.hbs 文件，当我单击链接时它应该突出显示，请帮助我如何执行此操作。我是 Ember 的新手，找不到明确的解决方案。我有 ember 版本 2.18。

  {{#link-to 'adduser' id="addlink" }}MANUAL ADD {{/link-to}}</div>
  <br>
 {{#link-to 'csvadd' class="button"}}
  CSV ADD
  {{/link-to}} 

Answer 1

您应该创建一个组件来处理点击/事件或未点击状态。
您的模板看起来像这样:

<span {{action "transitionToRoute"}}>
  <a>{{linkText}}</a>
</span>

您的 js 文件如下所示:

import Component from '@ember/component';
import { inject as service } from '@ember/service';

export default Component.extend({
  router: service(),
  classNameBindings: ['highlighted'],
  highlighted: false.

  actions: {
    transitionToRoute() {
      this.set('highlighted', true);
      this.get('router').transitionTo(this.get('route'));
    }
  }
});

而且，如果您将您的组件命名为 hughlightedLink，您将像这样使用它:

{{highlighted-link route="addUser" linkText="Add User"}}

当然你必须定义 css highlighted class 来设置你想要的 span