1

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

  • 网址="/"
  • anchorClass="菜单活动"
  • 锚点=“菜单”
  • 锚标签索引="2"
  • anchorTitle="菜单标题"

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

  • 咏叹调-haspopup =“真”
  • id="消费者"
  • 咏叹调-posinset="1"
  • 咏叹调-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>

请帮忙。

4

1 回答 1

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>
  }
}

这是相关文档的链接。

我不太确定该href属性是如何生成的，但您可以从源<stencil-route-link>代码中获取。

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

于 2018-08-13T12:26:04.170 回答