angular 如何从一个组件导航到另一个组件的特定部分？

Question

我想使用 angular 中的 router.navigate(['/divofanothercomponent']) 从一个组件开始导航。下面是代码。

组件A的ts文件

# imports
abc(){
alert('please login')
this.router.navigate(['/componentB'],{fragment:'drop1'});
}

html 组件 B

<section>  
    <div class="container">
      <ul class="nav justify-content-between">
  
        <ng-template id="drop1" #notLogged>
          <div class="group-left d-flex">
  
            <li class="nav-item dropdown">
              <div ngbDropdown class="d-inline-block">
                <a class="nav-link dropdown-toggle" id="dropdownForm1" role="button" data-toggle="dropdown"
                  aria-haspopup="true" aria-expanded="false" ngbDropdownToggle>
                  <i class="fas fa fa-user"></i> Login
                </a>
                <div ngbDropdownMenu aria-labelledby="dropdownForm1" class="dropdown-menu drop-adjust">
                  <form class="px-4 py-3" action="" method="POST" enctype = "multipart/form-data" role="form" [formGroup]="form">
                    <div class="form-group">
                      <label for="username">Username</label>
                      <input type="text" class="form-control" id="Username" aria-describedby="username"
                        placeholder="Enter Username" formControlName = "logid">
                      </div>
                    <div class="form-group">
                      <label for="password">Password</label>
                      <input type="password" class="form-control" id="password" aria-describedby="email"
                        placeholder="***********" formControlName = "logpass">
                    </div>
                  </form>
                </div>
              </div>
            </li>
          </div>
        </ng-template>
      </ul>
    </div>
  </section>

我想从组件 A 导航到组件 B 的分区 dropdownForm1。我怎样才能到达它？

Answer 1

Simpler/better回答：

好的，在您发表评论后，我阅读了更多相关内容，看来您并不是唯一发现它不起作用的人。至少有这两个问题 (1 & 2) 可能会阻止它用于条件模板（例如使用 *ngIf），正如我所知你在你的项目中遇到的那样。

所以让我们忘记我们在最初的答案中做了什么，即删除所有带有路由器配置的东西，因为它不需要，而是让你的 ComponentB class 看起来像这样：

import { ViewportScroller } from '@angular/common';
import { AfterViewInit, Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { first } from 'rxjs/operators';

@Component({
  templateUrl: './b.component.html'
})
export class BComponent implements AfterViewInit {
  constructor(
    private route: ActivatedRoute,
    private viewportScroller: ViewportScroller
  ) {}

  ngAfterViewInit(): void {
    this.route.fragment
      .pipe(first())
      .subscribe(fragment => this.viewportScroller.scrollToAnchor(fragment));
  }
}

这应该可以解决问题！我创建了这个 stackblitz angular 应用程序来测试它：https://stackblitz.com/edit/angular-q3pydk?file=src/app/app-routing.module.ts.

初始通用答案，基于路由器选项：

实现这个需要几个步骤，没有什么太复杂的。但首先只是关于您的 html 模板的小提示：

不要像这样使用 <ng-template>，因为 ng-template 的内容只有在有人引用该模板（例如使用 *ngIf=".. ; else notLogged" 时）才会呈现。如果您的代码中已经有了这个，那么一切都很好。

另一件事是，当引用时，只有 ng-template 的内容被添加到 DOM，而不是 <ng-template> 本身，因为那不是 HTML元素。这意味着如果您在其上放置 id="..." 属性，它将丢失。在这种情况下，这意味着您需要从 ng-template 标签中取出 id="drop1" 并将其移动到其下方的 div 上，即：

<ng-template #notLogged>
  <div id="drop1" class="group-left d-flex"

好的，现在开始真正的导航。您需要按照以下步骤使其工作：

a) 您需要正确设置 angular 路由器才能使其按预期工作（顺便说一下，默认情况下这种类型的片段 URL 导航被禁用）。

const routerOptions: ExtraOptions = {
    scrollPositionRestoration: 'enabled',
    anchorScrolling: 'enabled',
    scrollOffset: [0, 64],
  };

const routes: Routes = [
...
];

@NgModule({
  imports: [CommonModule, RouterModule.forRoot(routes, routerOptions)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

b) 现在路由器配置正确，您可以从 html 模板进行片段 URL 导航：

<a [routerLink]="'/componentB'" fragment="drop1">Go to section!</a>

或者，如您的问题，来自组件的代码：

this.router.navigate(['/componentB'], {fragment:'drop1'});

有关详细信息，请查看 this 文章。

angular 如何从一个组件导航到另一个组件的特定部分？

How to navigate from one component to a particular division of another component in angular?

navigation

typescript

angular10

Simpler/better回答：

初始通用答案，基于路由器选项：