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

所有app-html的代码

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

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

首先，请勿在不同的代码中使用routerLink="/all"和routerLinkActive="active current"

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

Angular 2-4手风琴式导航

1 个答案: