html - 我如何从一个组件路由到 Angular 中另一个组件的一部分？

Question

我有两个组件，它们位于不同的 route 。在第二个组件中有一个 div。我想从第一个组件路由到第二个组件的 div。是的，布线第二个组件很简单。但我想滚动到 div 的顶部。

感谢您的回答。

Answer 1

这个标签在component1中声明

<a [routerLink] = "['/c2']" fragment="c2id"> Link </a>

这里是 component2 的变化

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
  selector: 'app-c2',
  templateUrl: './c2.component.html',
  styleUrls: ['./c2.component.css']
})
export class C2Component implements OnInit {
  private fragment: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.fragment.subscribe(fragment => {
      this.fragment = fragment;
    });
  }
  ngAfterViewInit(): void {
    try {
      document.querySelector('#' + this.fragment).scrollIntoView();
    } catch (e) {}
  }
}

你的 component2 html 将是这样的

<p style="height: 800px;">
c2 works!
</p>
<hr>
<div id="c2id" style="height: 500px;">
  The div with c2id
</div>

这是更新后的工作 stackblitz https://angular-fragment-example.stackblitz.io