Angular 4 跳过链接答案

【问题标题】：Angular 4 Skip LinksAngular 4 跳过链接
【发布时间】：2017-10-13 13:31:43
【问题描述】：

致力于使 Angular 项目易于访问。页面有一个这样的框架：每个元素都是一个组件。

<div>
<topnav> </topnav>
<leftnav> </leftnav>
<subnav> </subnav>
<header> </header>
<router-outlet> </router-outlet>
</div>

我会将跳过链接放在顶部导航中，并且将事件发送到框架很容易，但是我如何引导它默认聚焦路由器插座中的第一个可聚焦元素？我知道我可以使用 view child 并获取对插座的引用，然后通过它访问子节点，但它并不总是相同的节点索引。

谢谢

【问题讨论】：

【解决方案1】：

通常跳转到内容的链接指向一个容器元素，而不是第一个可聚焦的元素。因为屏幕阅读器用户想知道的第一个链接/输入/等之前可能有文本内容。

给路由器出口容器一个id 属性并使链接的href 值相同。例如

<a href="#output">
<div id="output">

【讨论】：