Question

我有一个与组件之间的Angular 2通信相关的问题。让我说我有一个PageComponent模板，我有动态加载标签（在这个例子中有静态）。在这些选项卡中，我想使用DataLoaderService将数据动态加载到PageComponent中。

用更简单的语言：DB数据加载到PageComponent中。 PageComponent应使用 Tab 对象填充标签数组。那么，如何将数据从PageComponent传递给TabsComponent并动态生成标签？

PageComponent 现在非常简单。它注入一个DataLoaderService，负责从数据库中收集数据。简单。

import { Component, OnInit } from '@angular/core';
import { DataLoaderService } from '../services/data-loader.service';

@Component({
    templateUrl: 'app/templates/page.template.html',
    providers: [DataLoaderService]
})
export class PageComponent { 
   constructor(private dataLoaderService: DataLoaderService){}
}

在 page.template.html 文件中，我有标签（引导标签）：

<tabs>
    <tab tabTitle="Tab 1">
       Here's some content.
    </tab>
    <tab tabTitle="Tab 2">
       And here's more in another tab.
    </tab>
</tabs>

TabsComponent 和标签代码：

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

/**
* Tabs Component
*/
@Component({
    selector: 'tabs',
    template: `
    <ul class="nav nav-tabs">
        <li *ngFor="let tab of tabs" (click)="selectTab(tab)"   [class.active]="tab.active">
            <a>{{tab.tabTitle}}</a>
        </li>
    </ul>
    <ng-content></ng-content>
    `,
})
export class TabsComponent {
    tabs: Tab[] = [];

    selectTab(tab: Tab) {
        this.tabs.forEach((tab) => {
            tab.active = false;
        });
        tab.active = true;
    }

    addTab(tab: Tab) {
        if (this.tabs.length === 0) {
            tab.active = true;
        }
        this.tabs.push(tab);
    }
}

/**
* Tab Component
*/
@Component({
    selector: 'tab',
    template: `
    <div [hidden]="!active">
        <ng-content></ng-content>
    </div>
    `
})
export class Tab {
    @Input() tabTitle: string;
    active:boolean = false;

    constructor(tabs:TabsComponent) {
        tabs.addTab(this);
    }
}

Angular 2中选项卡和表格的结构 - 正确的方法

0 个答案: