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>

还有另一个包含 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）？

Answer 1

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

Answer 2

以角度方式使用 Angular Router 更适合您

创建三个组件而不是部分

home_one
home_two
home_three

然后在您的应用程序模块或单独的路由模块中声明您的路由：

const routes: Routes = [
  { path: 'home_one', component: home_one},
  { path: 'home_two', component: home_two },
  { path: 'home_three', component: home_three }
  { path: '', component: home }
  { path: '*', component: home }
];

然后在您的 Imports 中添加路线

@NgModule({
  imports: [RouterModule.forRoot(routes)],
})

然后在您的“主页”或您想要渲染这些部分的任何地方添加路由器插座，它将是这样的

<your-navbar-component></your-navbar-component>
<router-outlet></router-outlet>

在您的导航栏中为您的路线正确配置您的锚

<ul class="navbar-nav mx-auto">
              <li class="nav-item "  routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
                <a class="nav-link" [routerLink]="['/home_one']" >Home One <span class="sr-only"></span></a>
              </li>
          <li class="nav-item "  routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
                <a class="nav-link" [routerLink]="['/home_two']" >Home Two<span class="sr-only"></span></a>
              </li>
              <li class="nav-item "  routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
                <a class="nav-link" [routerLink]="['/home_three']" >Home Three<span class="sr-only"></span></a>
              </li>

</ul>

更多请访问官方文档： https://angular.io/guide/router

Answer 3

如果这是选项卡的点击并更改选项卡的相应部分：-

.ts

tab = 'tab0';

.html

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


<section id="home_one" *ngIf="tab ==='tab0'">
stuff 
section
one
// Here you can pass selctor of a separate component for each section
// <tab0-component></tab0-component>
    </section>

    <section id="home_two" *ngIf="tab ==='tab1'">
       stuff 
       section
       two
    </section>

    <section id="home_three" *ngIf="tab ==='tab2'">
        stuff 
        section
        three
    </section>

如果你想去相应的片段 onclick 即在该文档中滚动视图：-

Angular2 Routing with Hashtag to page anchor

如果您想更改每个选项卡的路线，那么：-

app.routing.ts

// create routes for each tab

.ts

constructor(public router:Router){
}

opentab(routes){
this.router.navigate[routes]
}

.html

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

<router-outlet></router-outlet>