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中，要将类引用传递给directives属性，您需要在该文件的“变量范围”中使其可用

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

Answer 2

我会将ckAutoLoanCalculator类包含到实际使用它的页面中，在您的情况下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 {}

在标签模板中加载组件

3 个答案: