Question

我有菜单项，例如房屋，帐户，关于等等。全部都包含数据网格。而且我正在从其他api获取数据。

我的工作是当用户单击菜单项时需要在选项卡中显示它我的组件具有子组件，从这些子组件中可以获得一些过滤条件，并以此为基础将数据加载到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>

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

1 个答案: