无法为angular2选项卡组件激活第一个选项卡

Question

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方法，但它似乎不起作用。您能否告诉我如何激活第一个窗格并加载选项卡的详细信息。

Answer 1

我做了类似但没有使用标签的东西，我使用了面板，但概念可能是相同的。这就是我所做的。

这是我的HTML文件

<div class="container">
<div class="row">
    <div class="col-md-3">
        <div class="panel">
            <div class="panel-heading bg-gray-lighter text-bold">Settings</div>
            <div class="list-group">
                <a class="list-group-item" (click)="settingActive=1" [ngClass]="{'active': (settingActive == 1)}">Tab Title 1</a>
                <a class="list-group-item" (click)="settingActive=2" [ngClass]="{'active': (settingActive == 2)}">Tab Title 2</a>
                <a class="list-group-item" (click)="settingActive=3" [ngClass]="{'active': (settingActive == 3)}">Tab Title 3</a>
                <a class="list-group-item" (click)="settingActive=4" [ngClass]="{'active': (settingActive == 4)}">Tab Title 4</a>
                <a class="list-group-item" (click)="settingActive=5" [ngClass]="{'active': (settingActive == 5)}">Tab Title 5</a>
            </div>
        </div>
    </div>
    <div class="col-md-9">
        <div *ngIf="settingActive == 1">
            <div class="panel panel-primary">
                <div class="panel-heading text-bold"> Panel Title 1</div>
                <div class="panel-body">

                  <!-- content here -->

                </div>
            </div>
        </div>
        <div *ngIf="settingActive == 2">
            <div class="panel panel-primary">
                <div class="panel-heading text-bold"> Panel Title 2</div>
                <div class="panel-body">

                  <!-- content here -->     

                </div>
            </div>
        </div>
        <div *ngIf="settingActive == 3">
            <div class="panel panel-primary">
                <div class="panel-heading text-bold"> Panel Title 3</div>
                <div class="panel-body">

                 <!-- content here -->  

                </div>
            </div>
        </div>
        <div *ngIf="settingActive == 4">
          <div class="panel panel-primary">
              <div class="panel-heading text-bold"> Panel Title 4</div>
              <div class="panel-body">

               <!-- content here -->  

              </div>
          </div>
        </div>
        <div *ngIf="settingActive == 5">
            <div class="panel panel-primary">
                <div class="panel-heading text-bold">Panel Title 5 </div>
                <div class="panel-body">

                    <!-- content here -->  


                </div>
            </div>
        </div>
    </div>
</div>

在我的课程中我添加了这个，所以它在init上实现。这样做可以设置您希望在加载时首先激活哪个选项卡。

export class BusinessInfoComponent implements OnInit {
  settingActive = 1;
}

我希望这能以某种方式帮助你：）