Question

我是Angular的新手，并开始使用一个简单的标签示例。我有标签显示和隐藏点击内容。但是内容直接显示在选项卡下方。我希望内容位于不同的模板中。如何将内容投影到其他模板？

这是我的标签组件，它当前在ng-content标签中输出标签的内容。

import {Component, Input} from 'angular2/core';
import {TabsComponent} from './tabs.component';

@Component ({
    selector: 'tab',
    template: `
                <div [hidden]="!active" class="widget-tab-content">
                    <ng-content></ng-content>
                </div>
              `
})
export class TabComponent {

    @Input() tabtitle: string;

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

这是我希望插入标签内容的另一个组件的模板

<div id="incident_overview" class="pane-container" style="">
<div id="incident_overview_handle" class="pane-handle" style="">
<i style="margin-right: 10px;" class="fa fa-ticket" aria-hidden="true"></i>Generic Widget
<div class="pull-right" style="margin-right: 5px;">
<i class="fa fa-list-ul" aria-hidden="true"></i>
</div>
<!--<ul data-widget-id="incident_overview" id="widget_incident_history-tabs" class="pane-tabs nav nav-tabs pull-right" style="font-size: 12px;">
<li value="0" class="active"><a href="">Overview</a></li>
<li value="1" class=""><a href="">Incident</a></li>
<li value="2" class=""><a href="">Email</a></li>
<li value="3" class=""><a href="">Resolution</a></li>
</ul>-->
<tabs>
    <tab tabtitle="Overview">1</tab>
    <tab tabtitle="Incident">2</tab>
    <tab tabtitle="Email">3</tab>
    <tab tabtitle="Resolution">4</tab>
</tabs>

</div>
<div class="pane normal-pane table-pane ui-widget-content">
<div id="widget_content" class="widget-table-pane">
    **** I WANT THE TAB CONTENTS TO BE DISPLAYED HERE****

</div>
</div>
</div>

道歉我很欣赏这是一个noob问题

angular2项目内容到不同的模板

0 个答案: