使用 onclick 菜单项在 ngb-tab 中显示我的组件

Question

我有一些菜单项，例如主页、帐户、关于等。其中都包含数据网格。我正在从 rest apis 获取数据。

我的工作是当用户单击菜单项时需要在选项卡中显示 并且我的组件具有子组件，我从中获得一些过滤条件，在此基础上我将数据加载到 ag-grid..

问题- 1-有时在两个选项卡中加载相同的数据。 2- BehaviorSubject 订阅正在返回先前订阅的数据。 3- this.router.navigate([path]) 重定向但显示空白页。如果我刷新该页面，那么它会加载内容。

html-

此文本显示循环遍历选项卡数组并显示选项卡组件

<ngb-tabset [destroyOnHide]="false" #tabs="ngbTabset" [justify]="currentJustify" [activeId]="selectedTab" 
                            (tabChange)="selectedTab = $event.nextId"> 
                                <ngb-tab  *ngFor="let tab of compTabs;let index=index" id= {{tab?.label}}>
                                <ng-template ngbTabTitle>{{tab?.label | titlecase}} 
                                    <i class="fa fa-times remove-tab" aria-hidden="true" (click) = "removeTab(index, $event)"></i> 
                                </ng-template>
                                <ng-template ngbTabContent>
                                    <ng-container *ngComponentOutlet="tab?.component">
                                    </ng-container>
                                </ng-template>
                                </ngb-tab>
                            </ngb-tabset>


    <ngb-tabset [destroyOnHide]="false" #tabs="ngbTabset" [justify]="currentJustify" [activeId]="selectedTab" 
                            (tabChange)="selectedTab = $event.nextId"> 
                                <ngb-tab  *ngFor="let tab of compTabs;let index=index" id= {{tab?.label}}>
                                <ng-template ngbTabTitle>{{tab?.label | titlecase}} 
                                    <i class="fa fa-times remove-tab" aria-hidden="true" (click) = "removeTab(index, $event)"></i> 
                                </ng-template>
                                <ng-template ngbTabContent>
                                    <ng-container *ngComponentOutlet="tab?.component">
                                    </ng-container>
                                </ng-template>
                                </ngb-tab>
                            </ngb-tabset>

---

component.ts-- for pushing the tab into the tab array
<pre>
    if (!tabContains) {                      
         this.compTabs.push(newTab);
         this.selectedTab = newTab.label    
         this.router.navigate(['/dashboard'])
      }
    }

除了 - 它加载正确的数据

我没有得到任何适当的理由。

Answer 1

问题是tab?，你必须使用'tab'。

  <ngb-tabset [destroyOnHide]="false" #tabs="ngbTabset" [justify]="currentJustify" [activeId]="selectedTab" 
                            (tabChange)="selectedTab = $event.nextId"> 
                                <ngb-tab  *ngFor="let tab of compTabs;let index=index" id= {{tab?.label}}>
                                <ng-template ngbTabTitle>{{tab.label | titlecase}} 
                                    <i class="fa fa-times remove-tab" aria-hidden="true" (click) = "removeTab(index, $event)"></i> 
                                </ng-template>
                                <ng-template ngbTabContent>
                                    <ng-container *ngComponentOutlet="tab.component">
                                    </ng-container>
                                </ng-template>
                                </ngb-tab>
                            </ngb-tabset>