aurelia - 如何使用 Aurelia 向路线添加图标/图像？

Question

我想在 Aurelia 的路由器配置中指定的导航链接中添加图像/图标。

Answer 1

我在GitHub 上找到了答案。您可以在路由器配置中添加一个Settings属性，该属性允许您指定图像的路径。就我而言，我使用的是 SVG：

import {inject} from 'aurelia-framework';
import {Router} from 'aurelia-router';

@inject(Router)
export class App {
  constructor(router) {
    this.router = router;
    this.router.configure(config => {
      config.title = 'Aurelia';
      config.map([
        {route: ['', 'dogs'], moduleId: './dogs', nav: true, title: 'Dogs', settings: './img/dogs-nav.svg'},
        {route: ['cats', 'cats'], moduleId: './cats', nav: true, title: 'Cats', settings: './img/cats-nav.svg'},
    });
  }
}

<ul class="nav navbar-nav">
  <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
    <a href.bind="row.href">
      <img src="${row.settings}">
      <span>${row.title}</span>
    </a>
  </li>
</ul>