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突出显示的类来设置你想要的样式

在emberJS中动态改变链接的颜色

1 个答案: