时间戳

首页 > 解决方案 > Angular 6链接到其他组件中的部分？

html - Angular 6链接到其他组件中的部分？

问题描述

我有一个带有此代码的导航栏组件：

 <ul class="navbar-nav mx-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#" >Inicio <span class="sr-only"></span></a>
              </li>
              <li class="nav-item active">
                <a class="nav-link" href="#">Here Link Home Section 2 <span class="sr-only"></span></a>
              </li>


</ul>

并有另一个包含 3 个部分的组件 HomeComponent：

<section id="home_one">
    stuff 
    section
    one
</section>

<section id="home_two">
   stuff 
   section
   two
</section>

<section id="home_three">
    stuff 
    section
    three
</section>

如何从导航栏链接链接到另一个组件（homeComponent）中的特定部分（部分 2）？

标签： htmlangularangular6

解决方案

Angular 6.1 有一个叫做 anchorScrolling 的新功能，启用这个选项并使用路由器片段

app.module.ts

@NgModule({
  imports: [BrowserModule, FormsModule, RouterModule.forRoot(routes, {
    anchorScrolling: 'enabled',
  })],
  declarations: [AppComponent, HelloComponent, ComponentbComponent],
  bootstrap: [AppComponent]
})

app.component.html

<a [routerLink]="['item']" [fragment]="'section2'">
    section2
</a>
<router-outlet></router-outlet>

示例：https ://stackblitz.com/edit/angular-zgmsuw

推荐阅读