我對 Angular 還很陌生，需要解決一個看似簡單的問題：在 Angular 引導程式中的選項卡之間導航時顯示警報或確認訊息。問題是當移動到另一個選項卡時，該選項卡將首先打開，然后顯示一條警報訊息，如果單擊取消它將回傳到上一個選項卡，我想要的只是在單擊確認離開之前不要離開當前選項卡。
<ul ngbNav #navWithIcons="ngbNav" [(activeId)]="activeTab" class="nav-tabs">
<li ngbNavItem="docs">
<a ngbNavLink (click)="navigateTab('docs')">
<span [data-feather]="'file-text'"></span>Documents</a>
<ng-template ngbNavContent>
<p>
any content
</p>
</ng-template>
</li>
<li ngbNavItem="external">
<a ngbNavLink (click)="navigateTab('external')">
<span [data-feather]="'chrome'"></span> External
Resource</a>
<ng-template ngbNavContent>
<p>
any external link
</p>
</ng-template>
</li>
</ul>
<div [ngbNavOutlet]="navWithIcons" class="mt-2"></div>
TS：
navigateTab(navTab: string) {
if (navTab != this.currentTab) {
if (this.isInputUpdated) {//if there is an update on the current tab inputs then
this.confirmationMessage(true, this.currentTab);
this.isInputUpdated = false;
}
this.currentTab = navTab;
}
}
uj5u.com熱心網友回復：
您可以在 ngbNav 元素上偵聽 navChange 事件并阻止事件傳播
<ul ngbNav #navWithIcons="ngbNav" [(activeId)]="activeTab" class="nav-tabs" (navChange)="navChanged($event)">
...
</ul>
navChanged(event) {
event.preventDefault()
}
在確認訊息方法中，如果單擊確認設定活動選項卡，其值為 currentTab
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/529114.html
上一篇：ngFor將字串字面量型別轉換為字串，拋出“元素隱式具有'any'型別，因為不能使用'string'型別的運算式......”