Javascript 角度-将组件实例注入到另一个组件的视图中

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

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

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

@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) {

    }
 }

你好
世界

现在，选项卡组件如下所示：

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

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

@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) {

    }
 }

@组件({
选择器：“制表符”，
模板：``
})
导出类选项卡组件{
@Input（）头：字符串；
}

选项卡组件如下所示：

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

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

@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) {

    }
 }

@组件({
选择器：“制表符”，
模板：`


{{tab.header}}


`,
})
导出类选项卡组件{
@ContentChildren（TabComponent）选项卡；
选择选项卡（选项卡：选项卡组件）{
}
}

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

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

无论如何，我不能让它工作。我尝试过使用ng template和CreateMbeddedView，但我不知道如何从组件中获取TemplateRef，我也不完全确定这是正确的方法

---

谢谢你

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

例如：

这是我的解决方案。请随意推荐一个更好的，因为我不完全确定这是选项卡集组件的示例：

@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 { }

@指令({
选择器：“制表符”，
})
导出类TAB指令{
私有静态种子=0；
只读id：数字；
@Input（）头：字符串；
@HostBinding（'hidden'）isHidden:布尔值；
私有isActive：布尔值；
@HostBinding（'class.active'）设置为活动（值：布尔值）{
this.isActive=值；
this.ishiden=！this.isActive；
}
获取活动（）：布尔值{
返回此.isActive；
}
构造函数（）{
this.id=TabDirective.seed++；
this.active=false；
}
}
@组成部分({
选择器：“bu制表符”，
模板：`


{{tab.header}}


`,
})
导出类TabsComponent实现AfterViewInit{
@ContentChildren（TabDirective）选项卡：QueryList；
@Output（）select=neweventemitter（）；
private-selectedTab:tab指令；
选择选项卡（选项卡：选项卡指令）{
this.tabs.forEach（（t:TabDirective）=>t.active=（t.id==tab.id））；
this.selectedTab=tab；
}
ngAfterViewInit（）：void{
如果（this.tabs&&this.tabs.length>0）{
this.tabs.first.active=true；
}
}
}
@组成部分({
模板：`
你好
世界！！
`,
})
导出类App{}

为什么在

选项卡组件

模板中没有

ng内容

？因为这样所有选项卡都会出现在那里，我只希望所选选项卡出现。如果不使用它，则忽略

内容忽略

标记内的所有内容。这不准确，因为我使用的是ContentChildren装饰器。它检索选项卡内的所有TabComponent，然后由TabComponnet用于生成选项卡标题。我想在用户按下选项卡标题时显示相关的选项卡组件。右侧，您可以通过

ContentChildren

访问它们。您需要从

tabcomponent

内容中获得什么？现在只是文本，你需要文本吗？你能添加这样的模板引用吗？

hello

Hi-Eliran，你能发布完整的代码示例吗？