angular2 在初始化时设置活动选项卡答案

【问题标题】：angular2 set active tab on initangular2 在初始化时设置活动选项卡
【发布时间】：2021-01-12 20:20:32
【问题描述】：

我正在尝试在 angular2 的选项卡上设置活动类。我正在为选项卡使用 ng2-bootstrap 插件，真的不明白该怎么做。

来自 ng2-bootstrap 的原始示例：

<tabset>
    <tab heading="Static title">Static content</tab>
    <tab *ngFor="let tabz of tabs"
         [heading]="tabz.title"
         [active]="tabz.active"
         (select)="tabz.active = true"
         (deselect)="tabz.active = false"
         [disabled]="tabz.disabled"
         [removable]="tabz.removable"
         (removed)="removeTabHandler(tabz)">
      {{tabz?.content}}
    </tab>
    <tab (select)="alertMe()">
      <template tabHeading>
        <i class="glyphicon glyphicon-bell"></i> Alert!
      </template>
      I've got an HTML heading, and a select callback. Pretty cool!
    </tab>
  </tabset>

因此，如果我想将最后一个选项卡设置为加载时处于活动状态，如何在 typescript 中访问此选项卡？主要问题是我只能访问在打字稿本身中创建的选项卡，而不是像第一个或最后一个那样的静态选项卡。

我喜欢实现以下目标：

ngOnActivate() {
    tab[4].activ=true;
}

【问题讨论】：

标签： angular

【解决方案1】：

起初，我理解错了，所以我更新了我的答案。要在您的示例中获取静态选项卡，您必须为它们设置一个 id，如下所示：

<tabset>
    <tab #headingTab heading="Static title">Static content</tab>
     ...

然后使用@ViewChild，您可以获得ElementRef，它有一个属性nativeElement，这很可能是您想要的。

在您的组件中，您必须从 ng2-bootstrap 导入 TabsetComponent：

...
import {TAB_DIRECTIVES, TabsetComponent} from "ng2-bootstrap/ng2-bootstrap";
...

要访问它，您必须挂钩到 ngAfterViewInit() 生命周期挂钩，因此您必须导入 AfterViewInit 并像这样实现它：

export class MyComponent implements AfterViewInit {

    @ViewChild('headingTab')       // id of the tab in your html template
    private _headingTab:TabsetComponent;  // followed by a variable which will hold the component

     ngAfterViewInit():any {
         console.log(this._headingTab);
     }
}

希望这会有所帮助。

【讨论】：

感谢您的回答。事实上，我需要访问所有选项卡。在我的示例中，我只使用静态选项卡，并且我想要一个 url 参数来控制哪个选项卡将处于活动状态。所以我想我会为每个标签添加一个 id，然后尝试使用 ViewChildren 访问。

【解决方案2】：

在使用 ngx-bootstrap TabsControl 的 Angular 5 应用程序中，我有静态选项卡，需要根据可观察调用的结果设置活动选项卡，该调用在 ngOnInit 函数中进行。对我来说，我的代码正在执行以下操作：

首先将整个tabset放入ngx-bootstrap的TabsetComponent：

@ViewChild(TabsetComponent)
tabSet: TabsetComponent;

然后在 observable 的订阅成功动作中（当我知道要选择的选项卡时）：

if (showMessageTab) {
    this.tabSet.tabs[4].active = true;
} else {
    this.tabSet.tabs[0].active = true;
}

我遇到的另一件事是不能使用 ngIf 或其他角度属性延迟加载和项目。在我的实验中，为了让 angular 填充 ViewChild 元素，它们似乎必须在第一次加载时出现在 html 中。这对你来说可能已经很明显了，但是当我遇到它时我就把它扔了。

我希望这对某人有所帮助。

【讨论】：

【解决方案3】：

试试这个：

<tab (select)="alertMe()" [ngClass]="{active: last}">
      <template tabHeading>
        <i class="glyphicon glyphicon-bell"></i> Alert!
      </template>
      I've got an HTML heading, and a select callback. Pretty cool!
 </tab>

【讨论】：

你快了 4 秒 ;) 但是你的代码中有一些错误。 this.tabs.. 如果您明确想要最后一个，您可能希望密钥是动态的。
但是你们都没有仔细阅读这个问题，这不是OP的要求。
是的，我也更新了我的答案。感谢 dfsq 的提示；）

【解决方案4】：

你可以在模板中这样做

<tabset>
  <tab [active]="currentTabId === 0">Tab1 Content<tab>
  <tab [active]="currentTabId === 1">Tab2 Content<tab>
  <tab [active]="currentTabId === 2">Tab3 Content<tab>
</tabset>

然后在打字稿中添加

currentTabId = 1

【讨论】：

看起来他正在尝试将 html 选项卡声明重用于选项卡列表。您的解决方案适用于不同的实现。