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