Angular - 將組件實例注入到另一個組件的視圖中

我使用Angular創建了選項卡控件。結果應該是這樣的：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) { 

    } 
}

現在，當調用selectTab（）方法時，我希望按下的選項卡（「hello」或「world」）的內容在博弈中呈現ttom的模板。

基本上需要有某種在TabsComponent標籤佔位符，並且它需要被結合到所述當前選擇的TabComponent。

無論如何，我不能得到它的工作。我試過使用ng-template和createEmbeddedView，但我不明白如何從組件中獲取TemplateRef，並且我不完全確定這是正確的方法。

謝謝！

來源

2017-07-05 Eliran Pe' er

爲什麼在「TabsComponent」模板中沒有'ng-content' ？ –

因爲那麼所有的選項卡都會出現在那裏，我只想要*選中*選項卡出現。 –

如果您不使用角度，則忽略'內容中的所有內容忽略'標記。 –

好吧，我解決了它，但我不確定這是否是正確的解決方案。我重複我的需求：我想製作一個功能齊全的標籤集組件，它由標籤標題和當前選定的標籤組成。

例子： 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 { }

來源

2017-07-06 16:24:17

Angular - 將組件實例注入到另一個組件的視圖中

回答

相關問題