如何在 <stencil-route-link> 路由器链接上添加自定义属性和属性？答案

【问题标题】：How to add custom attributes and properties on <stencil-route-link> router link?如何在 <stencil-route-link> 路由器链接上添加自定义属性和属性？
【发布时间】：2018-07-22 18:05:42
【问题描述】：

我正在尝试创建导航组件。我需要在导航链接上添加一些属性/自定义属性。我可以添加其中的一些，如下所示。

url="/"
anchorClass="菜单活动"
anchorRole="menuitem"
anchorTabIndex="2"
anchorTitle="菜单标题"

我还需要在链接上添加一些属性，但我无法在链接上添加这些属性，如下所示。

aria-haspopup="true"
id="consumers"
aria-posinset="1"
aria-setsize="2"
aria-label="主菜单"

我正在尝试在<stencil-route-link> 上添加属性，如下所示。

<stencil-route-link anchorClass="some classes" url="/" anchorClass="menu active" anchorRole="menuitem" anchorTabIndex="2" anchorTitle="Menu Title" anchorAriaHaspopup="true" anchorId="consumers" anchorAriaPosinset="1" anchorAriaSetsize="2" anchorAriaLabel="Home menu">Home</stencil-route-link>

请帮忙。

【问题讨论】：

请记住，您的 ARIA 使用量应保持在最低限度，并尽可能使用原生 html。请参阅“使用 ARIA 的第一条规则”(w3.org/TR/using-aria/#rule1)。我提到这一点是因为您说要添加 aria-setsize 和 aria-posinset。只有如果您不能使用本机列表（<ol> 或<ul>），才应使用这些属性。我不熟悉模板，但如果它有一个列表结构，你应该使用它而不是这些 aria 属性。现在，至于如何将这些属性注入到 stencil 中，我将不得不把它留给了解 stencil 的人。

标签： html routing accessibility stenciljs

【解决方案1】：

您可以手动导航而不是使用<stencil-route-link>。这样您就可以完全控制 HTML。

import { RouterHistory } from '@stencil/router';

export class SomeRoutedPage {
 @Prop() history: RouterHistory;

  render() {
    return (<a onClick={() => this.history.push('/')} data-custom-attribute="test">Home</a>
  }
}

这是the relevant docs的链接。

我不太确定href 属性是如何生成的，但您可以从the <stencil-route-link> source 获得。

或者，您可以扩展该组件以允许任意属性并发送拉取请求。

【讨论】：