在 Angular 中单击按钮后导航到另一个组件中的特定 div？

发布于 2025-01-09 22:13:47 字数 657 浏览 0 评论 0原文

我在桌子顶部有一个按钮。当用户单击该按钮时，用户应该能够登陆第二页中的第 2 部分。

我尝试如下，但它只进入该页面，而不是登陆到第 2 节 div 元素有人可以解释我怎样才能实现这一目标吗？

.firstPage.ts

addLease(){
    this.router.navigateByUrl('/secondPage/' + this.id);
  }

.firstPage.html

<button class="btn btn-primary btn-sm  ms-2" (click)="addLease()">  Lease Comp </button>

secondPage.html

<div #container>
  ............
  <div id="section1">
    .......
  </div>

  <div id="section2">
    ....
  </div>

</div>

原文

I have a button on the top of a table. When user clicks that button, user should be able landed to the section 2 in the second page.

I tried as below but it's going only to that page, not landing to the section 2 div element
Can someone explain how can I achieve this?

.firstPage.ts

addLease(){
    this.router.navigateByUrl('/secondPage/' + this.id);
  }

.firstPage.html

<button class="btn btn-primary btn-sm  ms-2" (click)="addLease()">  Lease Comp </button>

secondPage.html

<div #container>
  ............
  <div id="section1">
    .......
  </div>

  <div id="section2">
    ....
  </div>

</div>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

无声情话 2025-01-16 22:13:47

您可以将您的 div id 添加为查询参数

addLease(){
  this.router.navigate(
    ['/secondPage/' + this.id],
    { queryParams: { destination: 'yourDivId' } }
  );
}

并将其获取到您的第二个组件中并使用它滚动到该 div

 ngOnInit() {
    this.route.queryParams
      .subscribe(params => {
        document.getElementById(params.destination).scrollIntoView()
      }
    );
  }

您需要进行检查，例如不要使用不在 HTML 中的 ID...

You can add your div id as query params

addLease(){
  this.router.navigate(
    ['/secondPage/' + this.id],
    { queryParams: { destination: 'yourDivId' } }
  );
}

And get it in your second component and use it to scroll to that div

 ngOnInit() {
    this.route.queryParams
      .subscribe(params => {
        document.getElementById(params.destination).scrollIntoView()
      }
    );
  }

You need to make checks for example as to not use IDs that are not in your HTML...

回复收藏 0 原文

~没有更多了~