角度 2-4 手风琴风格导航.

Question

我的手风琴样式移动导航栏在特定选项卡下显示内容时遇到问题。 我用来从组件中获取内容并拉入视图，但它在导航栏下方而不是特定div 下显示数据。任何想法都会有所帮助！谢谢。

导航栏的代码

`<div class="container panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<nav style="padding-top: 50px;">
<ul class="nav nav-justified">
<li routerLinkActive="active current"><a routerLink="/all">All</a></li>
<li routerLinkActive="active current"><a routerLink="/1">1</a></li>
<li routerLinkActive="active current"><a routerLink="/2">2</a></li>
<li routerLinkActive="active current"><a routerLink="/3">3</a></li>
<li routerLinkActive="active current"><a routerLink="/4">4</a></li>
<li routerLinkActive="active current"><a routerLink="/5">5</a></li>
<li routerLinkActive="active current"><a routerLink="/6">6</a></li>
<li routerLinkActive="active current"><a routerLink="/7">7</a></li>
<li routerLinkActive="active current"><a routerLink="/8">8</a></li>
<li routerLinkActive="active current"><a routerLink="/9">9</a></li>
<li routerLinkActive="active current"><a routerLink="/notifications">Notifications</a></li>
</ul>
</nav>
</div>
</div>
</div>`

适用于所有应用的代码.html

`<div class="container">
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">`

所有应用程序组件.ts

`import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-all-apps',
templateUrl: './all-apps.component.html',
styleUrls: ['./all-apps.component.css']
})
export class AllAppsComponent implements OnInit {
constructor() { }
ngOnInit() {
}
blah
}
`

导航栏视图

Answer 1

嗨，首先不要在不同的标签中使用routerLink="/all"和routerLinkActive="active current"

使用<a routerLink="/all" routerLinkActive="active">text</a>这是使用它的正确方法。