Question

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

url =“ /”
anchorClass =“菜单激活”
anchorRole =“ menuitem”
anchorTabIndex =“ 2”
anchorTitle =“菜单标题”

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

aria-haspopup =“ true”
id =“消费者”
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>

请帮助。

Answer 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中得到。

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

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

1 个答案: