时间戳

首页 > 解决方案 > 如何以角度从一个组件导航到另一个组件的特定分区？

typescript - 如何以角度从一个组件导航到另一个组件的特定分区？

问题描述

我想从一个使用router.navigate(['/divofanothercomponent'])角度的组件导航。下面给出的是代码。

组件 A 的 ts 文件

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

组件B的html

<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。我怎样才能到达它？

标签： typescriptnavigationangular10

解决方案

更简单/更好的答案：

好的，所以在您发表评论后，我对此进行了更多阅读，看来您并不是唯一一个看到它不起作用的人。至少有这两个问题（1和2）可能会阻止它适用于条件模板（例如使用 *ngIf），正如我知道您在您的项目中所遇到的那样。

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

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"）才会呈现。如果你的代码中已经有了这个，那么一切都很好。

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

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

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

a）您需要正确设置角度路由器才能按预期工作（默认情况下，这种类型的片段 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'});

有关更多信息，请查看这篇文章。

推荐阅读