Angular - 将组件实例注入另一个组件的视图

Question

我正在使用 Angular 创建选项卡控件。结果应如下所示：

<tabs>
   <tab header="tab 1">
     hello
   </tab>
   <tab header="tab 2">
     world
   </tab>
</tabs>

现在，tab 组件看起来像这样：

@Component({
    selector: 'tab',
    template: `<ng-content></ng-content>`
})
export class TabComponent {
    @Input() header: string;
}

tabs 组件看起来像这样：

@Component({
    selector: 'tabs',
    template: `
       <div class="tabs">
            <ul>
                <li *ngFor="let tab of tabs">
                    <a (click)="selectTab(tab)">
                        {{tab.header}}
                    </a>
                </li>
            </ul>
        </div>
    `,
})
export class TabsComponent {
    @ContentChildren(TabComponent) tabs;

    selectTab(tab: TabComponent) {

    }
 }

现在，当调用 selectTab() 方法时，我希望将按下的选项卡（“hello”或“world”）的内容呈现在模板的底部。

TabsComponent中基本上需要有某种选项卡占位符，并且需要绑定到当前选中的TabComponent。

无论如何，我无法让它工作。我尝试过使用 ng-template 和 createEmbeddedView，但我不明白如何从组件中获取 TemplateRef，而且我不完全确定这是正确的路要走。

先谢谢了！

Answer 1

好的，所以我解决了，但我不确定这是正确的解决方案。 我重复我的需求： 我想制作一个功能齐全的选项卡集组件，它由选项卡标题和当前选定的选项卡组成。

示例： https://s3.envato.com/files/169665336/Thetabs%20-%20Responsive%20HTML5%20&%20CSS3%20Tabs%202016-01-29%2005-57-05.png

所以这是我的解决方案。请随时提出更好的建议，因为我不完全确定这是选项卡集组件的示例：

@Directive({
    selector: 'tab',
})
export class TabDirective {
    private static seed = 0;

    readonly id: number;

    @Input() header: string;

    @HostBinding('hidden') isHidden: boolean;

    private isActive: boolean;
    @HostBinding('class.active') set active(value: boolean) {
        this.isActive = value;
        this.isHidden = !this.isActive;
    }

    get active(): boolean {
        return this.isActive;
    }

    constructor() {
        this.id = TabDirective.seed++;
        this.active = false;
    }
}

@Component({
    selector: 'bu-tabs',
    template: `
       <div class="tabs">
            <ul>
                <li *ngFor="let tab of tabs" [class.is-active]="tab.active">
                    <a (click)="selectTab(tab)">
                        <span>{{tab.header}}</span>
                    </a>
                </li>
            </ul>
        </div>

        <ng-content></ng-content>
    `,
})
export class TabsComponent implements AfterViewInit {
    @ContentChildren(TabDirective) tabs: QueryList<TabDirective>;

    @Output() select = new EventEmitter<TabDirective>();

    private selectedTab: TabDirective;

    selectTab(tab: TabDirective) {
        this.tabs.forEach((t: TabDirective) => t.active = (t.id === tab.id));
        this.selectedTab = tab;
    }

    ngAfterViewInit(): void {
        if (this.tabs && this.tabs.length > 0) {
            this.tabs.first.active = true;
        }
    }
}

@Component({
    template: `
        <tabs>
            <bu-tab header="hello">
                Hello!!
            </bu-tab>
            <bu-tab header="world">
                World!!
            </bu-tab>
        </tabs>
  `,
})
export class App { }