角- routerLink聚焦

Question

我很难专注于routerLink。

第一行以理论为重点展示了完美的URL，但没有关注任何内容。第二行的焦点很好，但重新加载完整的页面。我能做些什么来使用routerLink并专注于特定的输入？

产地: Component1

<a [routerLink]="'first'" fragment="name"> first </a>


<a href="{{ '/first#name' }}"> first </a>

目标: component2

<input
#name
id="name"
matInput
(ngModelChange)="change()"/>

Answer 1

在应用程序路由模块中启用anchorScrolling。

const routes: Routes = [{ ... }];

@NgModule({
  imports: [RouterModule.forRoot(routes, { anchorScrolling: 'enabled' })],
  exports: [RouterModule],
})
export class AppRoutingModule {}

我不知道为什么默认情况下这是禁用的。

如果该链接可多次单击，则还必须将onSameUrlNavigation设置为'reload'。

const routes: Routes = [{ ... }];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      anchorScrolling: 'enabled',
      onSameUrlNavigation: 'reload',
    }),
  ],
  exports: [RouterModule],
})
export class AppRoutingModule {}

请参阅这里的所有选项：https://angular.io/api/router/ExtraOptions