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

Question

In an ionic app, i am using a angular component. In that angular component, i have a variable headerText which in initialized from the page where this component is used.

Problem is that headerText variable is always undefined.

How can i fix this problem?

This is the angular component where headerText variable is defined.

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();
  }
}

This is how i am passing a value to this headerText variable from where this component is used.

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

Answer 1

See below.

The reason why this is not working is that your root element in which you place the <custom-header-text [headerText]="'Inbox'"></custom-header-text> is not an angular component. Because of this, Angular won't compile this element. And Angular does not read attribute values during runtime, only during compile time, as otherwise we would get a performance hit.

Answered here

Angular 2 input parameters on root directive

Answer 2

Your code wasn't working as the HeaderModule was not correctly configured.

There were a few issues with your implementation:

1. The path to the Header Module wasn't correctly set in AppModule.
2. The path to the HeaderComponent template was also not set to the correct HTML file.

After fixing those, it was working as expected. Here's an Updated StackBlitz for your ref.