如何在Angular中将对象属性用作@Input绑定？

Question

I'm new in Angular and Ionic Frameworks, so I'm practicing first. I have a trouble with a basic @Input testing where basically I'm looping trought an array of Tab Pages and then I want to render each tab with <ion-tab> . Here is my code:

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" } );
  }
}

So my question is there's a way to bind a property from an object and used it as Input for a component?

Thanks for reply.

Answer 1

Yes that is possible,

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

and your child component should have something like,

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