如何关注Angular中的顶部定位标记?

时间:2019-03-26 12:35:33

标签: javascript html angular

在我的应用程序中,我正在从首页导航到横幅组件。然后,横幅广告素材组件中的锚定标记不会集中在页脚锚定标记之前的制表符单击上。

是的,我想将锚标记集中在选项卡单击上,而不是页面加载上。

当我刷新横幅组件时,它可以正常工作。 当用户从家中导航到横幅组件时,它就无法正常工作。

There正在运行演示应用程序。

app.module.ts
@NgModule({
  imports:      [ 
    BrowserAnimationsModule,
    RouterModule.forRoot([
        {
          path: '',
          component: HomeComponent
        },
        {
          path: 'banner',
          component: BannerComponent,
        }
      ]
    ) ],
  declarations:   [ AppComponent,HomeComponent,BannerComponent],

  bootstrap:    [ AppComponent ]
})
export class AppModule { }

app.component.ts
@Component({
  selector: 'my-app',
  template: `
  <router-outlet></router-outlet>
  <div>
    <a href="https://www.google.com" target="_blank">footerLink</a>
  </div>
  `
})
export class AppComponent  {
  name = 'Angular';
}

home.component.ts
@Component({
  template: `
    <button routerLink="/banner">Banner</button>`
})
export class HomeComponent {
}

banner.component.ts
@Component({
  template: `
    <button routerLink="/banner">Banner</button>`
})
export class HomeComponent {
}

✔如果用户单击横幅按钮,然后单击下一页(“ /横幅”)上的选项卡。在这种情况下,“ BannerLink”锚点应该是重点。

✘当前,单击下一个('/ banner')页面上聚焦FooterLink锚标签的标签

编辑

我发现了一个问题, 这是由于BrowserAnimationsModule而引起的,如果我替换为BrowserModule可以正常工作,那么为什么现在BrowserAnimationsModule模块中会发生这种情况?

0 个答案:

没有答案