Angular 2-4手风琴风格导航

Question

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

代码的NavBar

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

代码全apps.html

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

全应用component.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 
} 
` 

Nav Bar View

Answer 1

嗨首先不要在不同的标签

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