Angular - Как получить доступ к вложенному дочернему компоненту из родительского компонента

Question

У меня есть следующий фрагмент кода:

AppComponent.component.html

<section class="tabs">
    <tab-set [heading]="'Discover'">
       <tab-content [title]="'Profile'" [paneId]="panel01">
       </tab-content>
       <tab-content [title]="'Follow'" [paneId]="panel02">
       </tab-content>
       <tab-content [title]="'Contact'" [paneId]="panel03">
       </tab-content>
    </tab-set>
</section>

TabsetComponent.ts

@Component({
   selector: 'tab-set',
   template: 
   `
   <div class="tab-set">
      <h2 class="d-flex tab-set-title">{{heading}}</h2>
      <ul class="tab-list">
          <!-- I want to access all children <tab-content> and get title to render it here -->
          <li class="tab-item"></li>
      </ul>
   </div>

   <div class="tab-content>
        <!-- I want to access html of each child <tab-content> to render it here -->
   </div>
   `
})
export class TabsetComponent implements OnInit, AfterViewInit, AfterContentInit {
   @Input() heading: string;
   @ContentChildren(TabContentComponent) contentTabs;
   @ViewChildren(TabContentComponent) viewTabs;

   ngOnInit() {

   }

   ngAfterViewInit(): void {
      // contentTabs still null
      // viewTabs still null
   }
   ngAfterContentInit(): void {
      // contentTabs still null
      // viewTabs still null
   }
}

TabContentComponent.ts

@Component({
   selector: 'tab-content',
   templateUrl: './tab-content.component.html',
   styleUrls: ['./tab-content.component.scss']
})
export class TabContentComponent implements OnInit {

  @Input() title: string;
  @Input() paneId: string | number;

  constructor() { }

  ngOnInit() { }

}

Согласно коду, как я могу получить все в TabsetComponent. Я пытался ViewChildren и ContentChildren, но, похоже, не работает. Пожалуйста, помогите решить ее, спасибо всем.

ОБНОВЛЕНИЕ 2019/01/11

Я вставил TabsetComponent в конструктор TabContentComponent, а затем добавляю каждый tabcontent в свойство tabs массива. Но в интерфейсе пользователя по-прежнему не отображается представление TabContentComponent.

export class TabsetComponent implements OnInit, AfterViewInit, AfterContentInit {
   private tabs: TabContentComponent[];

   // ... the others line code

   addTab(tabContent: TabContentComponent) {
     this.tabs.push(tabContent);
   }

}


export class TabContentComponent implements OnInit {

   @Input() title: string;
   @Input() paneId: string | number;

   constructor(private tabset: TabsetComponent) { }

   ngOnInit() {
      this.tabset.addTab(this);
   }
}