在选项卡模板中加载组件

Question

我正在尝试创建一个具有两个底部导航选项卡的应用程序，每个选项卡都是一个不同的组件

这是我的代码：

import {Page} from 'ionic-angular';
import {Component} from 'angular2/core';
import {ckAutoLoanCalculator} from '../../components/ckAutoLoanCalculator/ckAutoLoanCalculator';

@Page({
    template: `<ion-navbar *navbar class="contact_navbar">
                    <ion-title>Loan calculator</ion-title>
                </ion-navbar>
                <ion-content><ck-auto-loan-calculator></ck-auto-loan-calculator></ion-content>`,
})
class CompareRates {}

@Page({
  templateUrl: 'build/pages/home/home.html',
  directives: [ckAutoLoanCalculator],
})

export class Home {
    loan_calculator: any;
    compare_rates: any;

    constructor() {
        this.loan_calculator = LoanCalculator;
        this.compare_rates = CompareRates;
    }
}

如您所见，我在单击“贷款计算器”选项卡时尝试加载 ck-auto-loan-calculator 组件。但它不会加载内容，尽管我可以在内容中看到 <ck-auto-loan-calculator> 我需要触发什么吗？

Answer 1

您的自定义选项卡组件似乎缺少 import。

在 Angular2 中，要将 class 引用传递给 directives 属性，您需要使其在该文件中可用 'variable scope'

import {ckAutoLoanCalculator} from './path/to/component'

Answer 2

我会将 ckAutoLoanCalculator class 包含到实际使用它的页面中，在您的情况下是 CompareRates 一个：

@Page({
  template: `
    <ion-navbar *navbar class="contact_navbar">
      <ion-title>Loan calculator</ion-title>
    </ion-navbar>
    <ion-content>
      <ck-auto-loan-calculator></ck-auto-loan-calculator>
    </ion-content>
  `,
  directives: [ckAutoLoanCalculator]
})
class CompareRates {}

而不是 Home 那个。

Answer 3

这实际上是 export class CompareRates {} 我需要的

在选项卡模板中加载组件

Load component in tab template

tabs

components

angular