javascript - Angular 2+ : Child components ts variable changes but UI does not show changed value?

Question

我有一个子 TestComponent 组件，如下所示:

import { Component, OnInit, Input } from '@angular/core';
import { ApiService } from '../../../api.service';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html'
})
export class TestComponent implements OnInit {

  constructor(private apiService: ApiService) { }

  testDisplayMessage = 'No data to show';

  ngOnInit() {
  }

  getMessage(param: string) {
    this.callingTest = true;
    this.apiService.getTest( param ).subscribe( data => {
      this.setTestDisplayMessage( data );
      this.callingTest = false;
    }, err => {
      console.log( JSON.stringify( err ) );
      this.setTestDisplayMessage( 'Failed to get data' );
      this.callingTest = false;
    } );
  }

  setTestDisplayMessage( message: string ) {
    this.testDisplayMessage = message;
  }
}

test.component.html的内容

<p style="padding: 10px;">{{ testDisplayMessage }}</p>

在父组件中使用:

点击按钮时触发父组件中的 JS 代码，

import { TestComponent } from './test/test.component';
....

.....
@Component({
  providers: [ TestComponent ],
  templateUrl: 'parent.component.html'
})
export class ParentComponent implements OnInit {
  ...
  constructor(private testComponent: TestComponent) { }
  ...
  // Button on parent template triggers this method
  getMessage() {
    this.testComponent.getMessage('Hello');
  }
  ...
}

在父组件中添加Html标签，

<app-test></app-test>

当我调试上述代码触发点时，调用 setTestDisplayMessage() 会发生 TestComponent 中的字段 testDisplayMessage 发生更改，但 UI 显示旧的message 'No data to show'，为什么更改消息没有反射(reflect)在 UI 模板上？或者这不是它应该使用的方式？我应该使用@Input

更新:

根据以下答案和注释部分中给出的指针，我将组件更改为 @ViewChild 因此在上面的父组件中，而不是将子组件作为参数传递给我声明的构造函数它使用 @ViewChild 作为子组件，因此代码更改如下，

之前的错误代码

constructor(private testComponent: TestComponent) { }

解决方案

@ViewChild(TestComponent)
testComponent: TestComponent;

我找到了this article有用。

Answer 1

使用@ViewChild()

在 html 文件中:

<app-test #childComp></app-test>

在父组件.ts文件中

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

.....
@Component( {
templateUrl: 'parent.component.html'
} )
export class ParentComponent implements OnInit {

@viewChild('childComp') childComp: any;
constructor() { }
...
// Button on parent template triggers this method
getMessage() {
   this.childComp.getMessage('Hello');
}
...
}