以编程方式创建选项卡

Question

我按照 here 的说明使用 material 标签。我很难弄清楚如何以编程方式创建（然后专注于）新选项卡。我还想在不再需要时删除标签。通过在网络上挖掘，我开始猜测一些函数调用，比如

export class VehiclesComponent {

  @ViewChild(MdTabsModule) tabs: MdTabsModule;

  constructor (private router: Router, private parentComponent: AdminComponent, private userService: VehicleService) {}

  ngOnInit() {
    /* code presented here for demonstration purposes */
    this.tabs.push({label: "Some new tab", content: '<b>New tab content</b>'});
  }
}

当然，这段代码完全是编造的，它不起作用。至少现在我知道 MdTabsModule 没有名为 push 的方法。不幸的是文档非常可怕。通过 TypeScript 创建选项卡甚至都没有被提及；检查源代码也没有发现这样的功能。

Answer 1

应该很容易。您可以在 component.html 中使用 *ngFor。

假设您有一个对象 MyTabs:

class MyTabs {
    Label: string;
    Contents: string;
}

在您的组件中创建此 class 的数组 class 例如

myTabs: MyTabs [];

然后在您的 component.html 中迭代 myTabs 以创建动态选项卡。

看这里：https://github.com/angular/material2/blob/master/src/demo-app/tabs/tabs-demo.html

以编程方式创建选项卡

Create tab programmatically

angular-material

angular-material2

angular