CSS [Angular 4, Bootstrap 4 Beta] Tabs / Reiter funktionieren nicht.

[Tersus]

Das umschalten der Tabs funktioniert bei mir einfach nicht.

Folgender absolut korrekter Code:

<div class="container">

	<ul class="nav nav-tabs">

		<li class="nav-item"><a class="nav-link active" href="#a">A</a>
		</li>

		<li class="nav-item"><a class="nav-link" href="#b">B</a></li>

	</ul>

	<div id="clothing-nav-content" class="tab-content">

		<div role="tabpanel" class="tab-pane fade show active" id="a"
			aria-labelledby="home-tab">
			<p>from panel a</p>
		</div>

		<div role="tabpanel" class="tab-pane fade" id="b"
			aria-labelledby="hats-tab">
			<p>from panel b</p>
		</div>

	</div>

</div>

Meine .angular-cli.json enthält die bootstrap.css:

...
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.js"
      ],
...

Die Tabs werden richtig angezeigt und der Inhalt des ersten Tabs, aber das darauf klicken ändert weder den Inhalt noch den Style.

Weiß jemand weiter?

 

[John Reese]

Wieso erwartest du denn, dass das so funktioniert?

Und wieso bindest du jQuery ein? Wieso bindest du das Bootstrap JS-Zeug ein?

Benutz' besser (nicht nur besser, sondern das ist der einzige Weg) sowas wie ng-bootstrap oder wenn's sein muss ngx-bootstrap.

 

[Tersus]

Wieso erwartest du denn, dass das so funktioniert?

Weil das in sämtlichen Online-JS-Testing-Seiten funktioniert.

Und wieso bindest du jQuery ein? Wieso bindest du das Bootstrap JS-Zeug ein?

Weil das ja quasi nicht schadet. Ich dachte für die Tab-Logik sind diese JS Files notwendig.

Also ist ng-bootstrap notwendig, damit die Bootstrap-Logik funktioniert. Ich versuche es.

 

[Bagbag]

Du machst ein Tab sichtbar indem du ihm die Klassen "show" und "active" gibst. Das Bootstrap JS macht das für dich, aber da Angular davon nichts weiß, entfernt es diese wieder. Genau so soll das auch sein.

JQuery hat in einer Angular App nichts verloren. Stattdessen musst du hier [ngClass] nutzen, um die Klassen konditional hinzuzufügen.


Eine mögliche Umsetzung:

Im Code das Feld "activeTab" und dann folgendes Template:

<div role="tabpanel" class="tab-pane fade" [ngClass]="{ 'show active': activeTab == 0 }" (click)="activeTab = 0"></div>

<div role="tabpanel" class="tab-pane fade" [ngClass]="{ 'show active': activeTab == 1 }" (click)="activeTab = 1"></div>

 

[rosch]

wenn du einen router einrichtest kannst du auch einfach routerLinkActive="meineactiveclass" nutzen. Einfach mal danach googlen