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;

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

1 个答案: