在角度 8 中单击子锚滚动到父 html 元素单页答案

【问题标题】：Click child anchor scroll to parent html element single page in angular 8在角度 8 中单击子锚滚动到父 html 元素单页
【发布时间】：2020-03-14 21:02:09
【问题描述】：

我是 Angular 8 的新手并创建了 SPA（单页应用程序），用于菜单栏单独的组件以及包含在主组件中的组件。每当单击菜单项（锚元素）时，它应该滚动到 about/contact 元素部分，但我尝试了一些解决方案，但无法滚动。主要是父元素不可访问。

home.component.html

<app-header></app-header>

....

<section #aboutus>About us details</section>

....

<section #contact>Contact form section</section>

header.component.html

<ul>
 <li class="nav-item">
    <a (click)="navigateTo('aboutus')" ><strong>ABOUT</strong></a>
</li>
<li class="nav-item">
    <a (click)="navigateTo('contact')" ><strong>Contact us</strong></a>
</li>
</ul>

header.component.ts

navigateTo(element: string) {
   document.querySelector(''+element+'').scrollIntoView(true);
}

我收到一个错误：

ERROR TypeError: Cannot read property 'scrollIntoView' of null

这将是很大的帮助。

【问题讨论】：

标签： html angular components innerhtml

【解决方案1】：

试试这样：

Working Demo

home.component.html

<app-header (Navigate)="navigateTo($event)"></app-header>

home.component.ts

  @ViewChild("aboutus", { static: false }) aboutus;
  @ViewChild("contact", { static: false }) contact;

  navigateTo(element: string) {
    this[element].nativeElement.scrollIntoView({ behavior: "smooth" });
  }

header.component.ts

  @Output() Navigate = new EventEmitter();

  navigateTo(element: string) {
    this.Navigate.emit(element)
  }

header.component.html

<ul>
 <li class="nav-item">
    <a (click)="navigateTo('aboutus')" ><strong>ABOUT</strong></a>
</li>
<li class="nav-item">
    <a (click)="navigateTo('contact')" ><strong>Contact us</strong></a>
</li>
</ul>

【讨论】：

抱歉，感谢您的回答，但是您能否将导航栏移至另一个组件，例如 header.componet，因为我将标题菜单添加到单独的组件并包括在 home.component 内部。然后它不工作。
你需要 eventemitter 有相同的逻辑
请提供参考
查看演示。
查看修改后的答案

【解决方案2】：

1 - 将模板引用变量添加到 href 标记，例如：

  <a (click)="navigateTo('aboutus')" #aboutus><strong>ABOUT</strong></a>

2 - 使用 ViewChild 获取 href：

  @ViewChild('aboutus') aboutusLink: ElementRef;

3 - 在这个 navigateTo 函数中添加以下内容：

  this.aboutusLink.nativeElement.scrollIntoView({behavior: 'smooth'});

避免在 Angular 中使用原生 js 选择器 :)

【讨论】：

ERROR TypeError: Cannot read property 'nativeElement' of undefined
刚刚替换了 document.querySelector(''+element+'').scrollIntoView(true);与“navigateTo(element)”函数上方的@ViewChild 一起添加到您的行。

【解决方案3】：

您可以使用service 进行高效编码。

// navigate.service.ts

import { Injectable } from '@angular/core';
import { EventEmitter } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class NavigateService {
  navigate = new EventEmmiter<string>();
}

现在是HeaderComponent

// header.component.html

<ul>
  <li class="nav-item">
    <a (click)="navigateTo('aboutus')" >
      <strong>ABOUT</strong>
    </a>   
  </li>
  <li class="nav-item">
    <a (click)="navigateTo('contact')" >
      <strong>Contact us</strong>
    </a>
  </li>
</ul>

// header.component.ts

import { Component } from '@angular/core';
import { NavigateService } from 'services/navigate.service'; // set path correctly

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
})
export class HeaderComponent {
  constructor(private navigateService: NavigateService) {}

  navigateTo(status: string): void {
    this.navigateService.navigate.emit(status);
  }
}

最后是HomeComponent

// home.component.html

<app-header></app-header>
....
<section #aboutus>About us details</section>
....
<section #contact>Contact form section</section>

// home.component.ts

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavigateService } from 'services/navigate.service'; // set path correctly

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
})
export class HomeComponent {
  @ViewChild('aboutus', { static: false }) aboutus: ElementRef;
  @ViewChild('contact', { static: false }) contact: ElementRef;

  constructor(private navigateService: NavigateService) {
    this.navigateService.navigate.subscribe((status: string) => {
      this[status].nativeElement.scrollIntoView({ behavior: 'smooth' });
    });
  }
}

现在您可以调用需要导航的服务。通过使用服务，您可以摆脱重复的额外代码。

【讨论】：