在 emberJS 中动态更改 link 的颜色

Question

这是我的 app.hbs 文件，当我单击 link 时，它应该突出显示，请帮助我如何做 this.I 我是 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

您应该创建一个可以处理 clicked/active 或不处理状态的组件。
您的模板可能如下所示：

<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 突出显示 class 以根据需要设置跨度样式

在 emberJS 中动态更改 link 的颜色

Changing color of link dynamically in emberJS

javascript

controller

hyperlink

ember.js