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

Question

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

 <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>

还有另一个组件 HomeComponent 有 3 个部分:

<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 部分)？

Answer 1

Angular 6.1 有一个叫做 anchorScrolling 的新功能，启用这个选项并使用 Router fragment

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