如何从另一个同级组件（​​跳过链接）中将Angular中的html元素作为目标？

Question

我需要从另一个同级组件中定位嵌套布局组件的元素。期望的目标元素在所述组件内深几层。我有一个Header组件，其中装有一个跳过链接<a></a>。选择跳过链接后，我需要将focus发送到上述同级组件的#main-content元素，该元素恰好是<div></div>。我该如何实现？

我尝试创建自定义属性指令。我尝试使用@ViewChild("main-content")定位元素，但似乎无法获得目标元素来获得焦点，因此无法显示样式更改的边界。任何建议都将不胜感激。

标题组件：

...
<a [href]="skipLinkPath" class="skip-link" (click)="skipLink()" tabIndex="0">Skip to Main Content</a> 
...

标题组件的TS：

...
@ViewChild('#mainContent') mainContent: ElementRef;

...

skipLink() {
  console.log("click event called");
  console.log(this.mainContent);
  this.mainContent.nativeElement.focus();
} 
...

主要组件：

  <div class="content-display skip-link-focus" role="main"  id="main-content" #mainContent>
    <router-outlet></router-outlet>
  </div>

Answer 1

您可以使用共享服务来实现这一目标

SharedService.ts ->

isFocus: Subject<boolean> = new Subject<boolean>();

在共享服务中创建主题

标题组件

skipLink() {
  this.sharedService.isFocus.next(true);
}

主要组成部分 创建一个字段

isFocus = false;

在init方法中订阅服务

this.sharedService.isFocus.subscribe(value => {
    this.isFocus = value;
});



  <div class="content-display skip-link-focus" role="main" [ngClass]={_focused: isFocus}  id="main-content" #mainContent>
    <router-outlet></router-outlet>
  </div>

在CSS

._focused {
 //required css
}

Answer 2

不能完全确定为什么接受的答案是基于JavaScript的。完全不需要JS，这一切都可以以一种更简单，更可靠的方式来实现。

<a [href]="skipLinkPath" class="skip-link" (click)="skipLink()" tabIndex="0">Skip to Main Content</a> 

首先，跳过链接不需要tabindex，如果您需要添加该链接以使链接可访问，请快速查看代码中的问题，因为链接会自动添加到{{1} }。

以上内容可能变为：

focus

请注意我如何更改<a [href]="#main-content" class="skip-link">Skip to Main Content</a> 以匹配您的主要内容div的ID。

href

上面的方法无需您自己处理焦点状态即可工作（如果您希望主div显示焦点已聚焦，请向其添加 <div class="content-display" role="main" id="main-content" #mainContent> <router-outlet></router-outlet> </div> ，但是上面的示例仍将跳过带有下一个选项卡的菜单不再是HTML中的第一个可聚焦项）。

如何使用锚点更改URL？

很显然，以上内容为您的URL添加了tabindex="0"，我认为这不是问题，但是如果您这样做，则可以拦截该点击并在浏览器中使用history API停止URL更新。

尽管这看起来可能需要更多工作，但是您将拥有一个功能强大的跳过链接，该链接无需JavaScript就可以使用，因此无论您的网站有没有JavaScript后备，都可以访问。

最终建议

#main-content

上面的div看起来可以更改为 <div class="content-display" role="main" id="main-content" #mainContent> 元素，以在语义上更正确，就像我假设您正在使用<main>一样。