使用 angular 显示标签 5？

Question

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

我有另一个组件，我通过循环插入标签：这是 ListComponent.html:

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

List组件中定义了"tabNames"数组：

export class ListComponent implements OnInit {

tabs: string[];

constructor() { }

  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

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

编辑 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);
    }
}

使用 angular 显示标签 5？

Display tabs using angular 5?

angular5