Question

在离子应用程序中，我正在使用角度组件。在该角度组件中，我有一个变量headerText，该变量是从使用该组件的页面初始化的。

问题在于headerText变量始终未定义。

我该如何解决此问题？

这是定义headerText变量的角度分量。

import { Component, Input, OnInit } from '@angular/core';
import { MenuController, NavController } from 'ionic-angular';

@Component({
  selector: 'custom-header-text',
  templateUrl: 'custom-header-text.html'
})
export class CustomHeaderTextComponent implements OnInit {

  @Input() headerText: string;

  constructor(private navCtrl :  NavController,
              private menuCtrl : MenuController) {

  }

  ngOnInit() {
    setTimeout(() => {
      console.log('text = ' + this.headerText);
    }, 3000);
  }

  goBack() {
    this.navCtrl.pop();
  }

  openMenuPage() {
    this.menuCtrl.enable(true,'bl-menu')
    this.menuCtrl.open();
  }
}

这就是我将值从使用此组件的位置传递到此headerText变量的方式。

<custom-header-text [headerText]="'Inbox'"></custom-header-text>

Answer 1

请参阅下文。

之所以不起作用，是因为您的根元素在其中您将<custom-header-text [headerText]="'Inbox'"></custom-header-text>放置在一个角度零件。因此，Angular将不会编译此元素。和 Angular在运行时不读取属性值，仅在编译时，否则会导致性能下降。

在这里回答

Angular 2 input parameters on root directive

Answer 2

由于HeaderModule配置不正确，您的代码无法正常工作。

您的实现存在一些问题：

在AppModule中没有正确设置标题模块的路径。
HeaderComponent模板的路径也未设置为正确的HTML文件。

修复这些问题后，它按预期运行。这是您推荐的Updated StackBlitz。

使用@Input装饰器从角度分量外部传递数据

2 个答案: