Как использовать свойство объекта в качестве привязки @Input в Angular?

Question

Я новичок в Angular и Ionic Frameworks, поэтому я сначала тренируюсь. У меня проблемы с базовым @Input тестированием, когда я в основном зацикливаюсь на массиве страниц вкладок, а затем хочу отобразить каждую вкладку с <ion-tab>. Вот мой код:

tabs.html

<ion-tabs>
  <ion-tab *ngFor="let page of tabPages" [root]="page.root" [tabTitle]="page.title">
  </ion-tab>
</ion-tabs>

tabs.ts

import { Component }    from '@angular/core';

// - - - Pages Components - - - //
import { AboutPage }    from '../about/about';
import { ContactPage }  from '../contact/contact';
import { HomePage }     from '../home/home';
import { SettingsPage } from "../settings/settings";

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

  tabPages : Array<any>;

  constructor() {
    this.tabPages = [];

    this.tabPages.push( { root : HomePage, title : "Home" } );
    this.tabPages.push( { root : AboutPage, title : "About" } );
    this.tabPages.push( { root : ContactPage, title : "Contact" } );
    this.tabPages.push( { root : SettingsPage, title : "Settings" } );
  }
}

Итак, мой вопрос: есть ли способ связать свойство из объекта и использовать его в качестве входного для компонента?

Спасибо за ответ.

Answer 1

Да, это возможно,

<ng-container *ngFor="let page of tabPages" >
  <ion-tab [root]="page.root" [tabTitle]="page.title">
  </ion-tab>
</ng-container>

и ваш дочерний компонент должен иметь что-то вроде

@input root: string;
@input tabTitle: string;