更新的答案：

Question

我有一个角度组件可以为CRUD动态创建表单和网格。元数据来自API。

它还根据元数据动态创建选项卡，默认情况下在模板中声明性地创建一个选项卡。动态标签是在模板html中使用* ngFor完成的，然后是默认标签的声明。

现在，我的任务是从组件代码中选择系列中的第一个标签。默认情况下，角度/清晰度选择在模板中声明的标签。

我不能使用* clrIfActive，因为我无法懒惰地装载表单控件，因为我绑定了各种东西（例如，对于Select Control数据来自后端，并且选项是动态创建的），所以这些控件在各个选项卡中布局。有效地，我需要以ngInit形式访问的所有控件。所以* clrIfActive指令不可用。

需要一种以编程方式选择第一个标签（动态标签之一）的方法。

我似乎无法做到。

我对'clrTabs'做了一个viewChild引用并检查了它（ngAfterViewInit）。列出了我的所有标签。但是，似乎无法通过tabLinkDirectives进入“必需”标签来激活它。 tabLinkDirectives.first和last指向模板中声明的选项卡。但是，_results还会显示具有动态创建的数组的数组。

任何帮助表示赞赏。

Answer 1

更新的答案：

除了下面的第一个答案外，请尝试订阅@ViewChildren的更改，然后在添加（或删除）选项卡后运行选项卡选择方法/逻辑。这是订阅代码：

ngAfterViewInit() {
  this.tabLinks.changes.subscribe(tabChange => {
    this.activateFirstTab();
  });
}

这是一个正在运行的堆叠闪电战：https://stackblitz.com/edit/clarity-v013-so-53771507-dynamic-tabs-question-agqn8x

原始答案

您可以为所有这样的标签链接设置QueryList

@ViewChildren(ClrTabLink) tabLinks: QueryList<ClrTabLink>;

然后，您可以在该列表中找到任何标签，并activate()像这样：

  activateFirstTab() {
    this.tabLinks.first.activate();
  }

我在Clarity v0.13和Clarity v1.0.0中使用了与上面的堆栈闪电相同的代码，并且在应用初始化之后，我始终选择第一个选项卡。如果您的应用程序表现不同，是否可以通过堆栈闪电重新创建该问题？

这里是v0.13 stackblitz，这里是v1.0.0 stackblitz.

从代码动态创建的选项卡和选项卡选择-VMWare Clarity Design

1 个答案:

更新的答案：

原始答案