如何在 Angular 中使用对象属性作为@Input绑定?

Question

我是Angular和Ionic Frameworks的新手，所以我先练习。我在基本的@Input测试中遇到了麻烦，基本上我循环播放了选项卡页面数组，然后我想用<ion-tab>渲染每个选项卡。这是我的代码：

选项卡.html

<ion-tabs>
<ion-tab *ngFor="let page of tabPages" [root]="page.root" [tabTitle]="page.title">
</ion-tab>
</ion-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;