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”数组在Listcomponent中定义：

导出类ListComponent实现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>

修改

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

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

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

使用角度5显示标签？

1 个答案: