如何从另一个同级组件（​​跳过链接）定位 Angular 中的 html 元素？

Question

I need to target a nested layout component's element from another sibling component. The desired target element is several layers deep within said component. I Have a Header Component that is housing a Skip Link <a></a> . Upon selecting the Skip Link I need to send focus to the aforementioned sibling component's #main-content element, which happens to be a <div></div> . How can I achieve this?

I have tried creating a custom attribute directive. I have tried targeting the element with @ViewChild("main-content") , I can't seem to get the target element to achieve focus, and thus show the border with style changes. Any Advice is greatly appreciated.

Header Component:

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

Header Component's TS:

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

...

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

Main Component:

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

Answer 1

You can use a shared service to achive this

SharedService.ts ->

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

Create a subject in shared service

Header Component

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

Main Component create a field

isFocus = false;

in on init method subscribe to service

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>

in css

._focused {
 //required css
}

Answer 2

Not entirely sure why the accepted answer is JavaScript based. This can all be achieved with no JS at all in a much simpler fashion and more robust way.

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

Firstly the skip link shouldn't need a tabindex , if you needed to add that to make the link accessible have a quick look through your code for an issue as links are automatically added to the focus order.

The above could become:

<a [href]="#main-content" class="skip-link">Skip to Main Content</a> 

Notice how I changed the href to match the id of your main content div.

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

The above will work without needing to handle the focus state yourself (if you want the main div to show that it is focused add tabindex="0" to it, but the above example will still skip the menu with the next tab stop being the first focusable item in your HTML).

What about the URL change using an anchor?

Obviously the above adds a #main-content to your URL, I don't consider that an issue, but if you do, you could intercept the click and use the history API in the browser to stop the URL updating.

Although that may then seem like more work, you then have a functional skip link that works without JavaScript so that whatever no JavaScript fallback your site has is still accessible.

final suggestion

  <div class="content-display" role="main"  id="main-content" #mainContent>

The above div looks like it could be changed to a <main> element to be more semantically correct as I am assuming you are using HTML5 .