0
I have tabs.component.ts file like
//Detail class for tab details
class Detail {
title: string; // Name of the tab
id: string //Id for the tab
text: string; // Tab Content
removable: boolean; // Variable to determine whether to display delete button next to tab
}
//Component to add and delete a tab
@Component({
selector: 'de-tabs',
template: require('./tabs.component.html'),
})
export class TabsComponent {
details: Detail[] = [];
id: number = 1; //Tab id
constructor() {
//Add Tab1 as default tab
this.details.push({
title: `Calculation1`,
id: '1',
text: `Some detail text for ${this.id}...`,
removable: false
});
//Add tab titled "+" as the last tab
this.addNewTabOption();
}
//Method to add a new tab
addDetail() {
//Remove the last tab titled "+"
this.details.pop();
//Iterate the id to point to next number
this.id++;
//Add the new tab details
this.details.push({
title: `Calculation${this.id}`,
id: `${this.id}`,
text: `Some detail text for ${this.id}...`,
removable: true
});
//Add tab titled "+" as the last tab
this.addNewTabOption();
}
//Adding tab titled "+" as the last tab
//Make removable variable as false since we don't want to display delete button for "+" tab
addNewTabOption() {
this.details.push({
title: `+`,
id: '+',
text: ``,
removable: false
});
}
} and html like
<!--Calling tab component to add and remove a tab-->
<de-tab>
<!--Add Extra Channel section-->
<template *ngFor="let detail of details" de-pane [title]="detail.title" [id]="detail.id">
</div>
</template>
</de-tab>
My tab component and html are as follows.
//Directive to set the active attribute for the tab
@Directive({
selector: '[de-pane]'
})
export class UiPane {
@Input() title: string;
@Input() id: string;
@Input() removable: string;
private _active: boolean = false;
constructor(public viewContainer: ViewContainerRef,
public templateRef: TemplateRef<any>) { }
//Set the active tab and embed the tab pane template in the view container
//If not active remove it from the view container
@Input() set active(active: boolean) {
if (active == this._active) return;
this._active = active;
if (active) {
this.viewContainer.createEmbeddedView(this.templateRef);
} else {
this.viewContainer.remove(0);
}
}
//Get the active attribute for a tab
get active(): boolean {
return this._active;
}
}
//Component to create and delete a tab
@Component({
selector: 'de-tab',
template: require('./tab.component.html'),
styles: ['a { cursor: pointer; cursor: hand; }']
})
export class TabComponent implements OnInit {
@ContentChildren(UiPane) panes: QueryList<UiPane>; //Get the list of tab panes
select(pane: UiPane) {
if (pane.title == '+') {
this.panes.toArray().forEach((p: UiPane) => p.active = p == pane);
} else {
this.panes.toArray().forEach((p: UiPane) => p.active = p == pane);
}
}
}
HTML is
<!--Display the tabs with small delete button for each tab-->
<ul class="nav nav-tabs">
<li *ngFor="let pane of panes"
(click)="select(pane)"
role="presentation" [class.active]="pane.active">
<a>{{pane.title}}
<span [hidden]="!pane.removable">
<span (click)="removeTab(pane);" class="glyphicon glyphicon-remove-circle"></span>
</span>
</a>
</li>
</ul>
<ng-content></ng-content>
我想知道如何使第一個選項卡在頁面加載時顯示內容。我嘗試使用ngAfterContentInit方法，並將第一個窗格傳遞給select方法，但它似乎沒有工作。您能否讓我知道如何使第一個窗格處於活動狀態並加載選項卡的詳細信息。無法爲第2個選項卡組件啓用第一個選項卡