Связывание данных между страницей и компонентом, не работающим в ionic 4 (Angluar)

Question

Я не могу передать данные со страницы компоненту, используя привязку данных.

Когда я пытался записать значение в конструкторе, оно говорит, что оно не определено. message - это имя переменной, которая используется для привязки данных.

app-floating-text-white.ts (component)

import { Component, OnInit ,Input} from '@angular/core';

@Component({
  selector: 'app-floating-text-white',
  templateUrl: './floating-text-white.component.html',
  styleUrls: ['./floating-text-white.component.scss'],
})
export class FloatingTextWhiteComponent implements OnInit {

 @Input() message: string;

 constructor() { 
   console.log(this.message)
 }

 ngOnInit() {}

}

app-плавающий-text-white.html (компонент)

<p> {{message}} </p>

page.html

<app-floating-text-white [message]="Hello World"> </app-floating-text-white>

Answer 1

Это ожидаемое поведение. В вашем app-floating-text-white.ts переменная сообщения не определена до тех пор, пока не сработает привязка. Поэтому, когда console.log вызывается в конструкторе (что происходит во время создания компонента), значение сообщения все еще не определено.

В течение ближайшего цикла CDR привязка будет обновлена, и новое значение «Hello World»будет передан в ваш дочерний компонент.

Попробуйте добавить ngAfterViewInit {console.log (this.message)} и посмотрите, что происходит после обновления всех привязок (ngAfterViewInit срабатывает после того, как все привязки были проверены и обновлены).

также я отмечаю, что здесь вы используете одинарные кавычки для привязки значения:

<app-floating-text-white [message]="Hello World"> </app-floating-text-white>

приведенный выше код ожидает, что Hello World будет переменной. Вы должны сделать это строкой:

<app-floating-text-white [message]="’Hello World’"> </app-floating-text-white>

Или привязать к фактической переменной вашей страницы .ts