使用角度 5 显示标签？

Question

我正在开发此博客中提到的自定义选项卡式组件：https://juristr.com/blog/2016/02/learning-ng2-creating-tab-component/

我有另一个组件，我通过 lopping 插入选项卡： 这是与 ListComponent.html:

<div>
   <tabs *ngFor="let tab of tabNames">
     <tab tabTitle="{{tab}}">testing {{tab}}</tab>
   </tabs>
 </div>

“tabNames”数组在 List 组件中定义：

导出类 ListComponent 实现 OnInit {

标签：字符串[];

构造函数() { }

  getTabs(): Observable<string[]>     {
      var tabNames: string[] = ['test1', 'test2', 'test3'];
      return Observable.of(tabNames);     }


      ngOnInit()      {



this.getTabs().subscribe(data => {    
    this.tabs = data;

      },
    error => {
      console.log("ngOnInit: Error while fetching, " + error);
  })


  }

}

虽然数组有 3 个选项卡名称，但 UI 中不会显示任何内容。 谁能帮我解决这个问题？

提前致谢。

Answer 1

从外观上看，您似乎是在创建多个 tabs 而不是 tab 组件。尝试将*ngFor 循环移动到tab 组件。

<div>
   <tabs>
     <tab *ngFor="let tab of tabNames" tabTitle="{{tab}}">testing {{tab}}</tab>
   </tabs>
</div>

编辑

所以要进一步解释这个 plunker 是如何工作的：https://plnkr.co/edit/tPhZLwrNRSFcDtQk2ifU?p=preview

我们没有使用QueryList 在DOM 中查找内容，而是让Tab 来完成这项工作。因此，在<tabs> 内的<tab> 元素上运行*ngFor 循环会创建所有选项卡并使用Tab 的构造函数将自身添加到Tabs 父级。

编辑 2

看起来 plunker 现在已经关闭了，所以这里是上面 html 的打字稿代码的细分：

Tabs.ts

import {Component} from '@angular/core'

@Component({
    selector: 'tabs'
})

public class Tabs {
    private _tabs: Tab[] = [];

    public addTab(tab: Tab) {
        if (this._tabs.length === 0) {
            tab.isActive = true;
        }
        this._tabs.push(tab);
    }

    public switchTab(tab: Tab) {
        for (let t of this._tabs) {
            t.isActive = false;
        }

        tab.isActive = true;
    }
}

Tab.ts

import {Component, Input} from '@angular/core'

@Component({
    selector: 'tab'
})

public class Tab {
    public isActive: boolean;
    @Input('tabname') public tabName: string;

    //Since Tabs is the container element, we can pass reference to the constructor
    constructor(tabs: Tabs) {
        tabs.addTab(this);
    }
}