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()的调用testDisplayMessage中的字段TestComponent发生了更改，但UI显示了旧消息'No data to show'，为什么是该消息更改不会反映在UI模板上吗？还是这不是应该被使用的方式？我应该使用@Input

更新：

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

更早的错误代码

constructor(private testComponent: TestComponent) { }

解决方案

@ViewChild(TestComponent)
testComponent: TestComponent;

我发现this article有用。

Answer 1

使用@ViewChild()

在html文件中：

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

在父component.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');
}
...
}

Answer 2

更新：

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

更早的错误代码

constructor(private testComponent: TestComponent) { }

解决方案

@ViewChild(TestComponent)
testComponent: TestComponent;

我发现this article有用。

Answer 3

绝对使用@Input（），但使用set方法

@Input()
set someProperty(value) {
  // do some code
}

现在每次您在此处传递新值时，代码都会运行

Answer 4

基本上，您的方法是错误的，请使用Input（）或Services在组件之间共享数据。

但是，如果您想使您的代码正常工作，则下面的可能有效

导入更改检测器

构造函数（私有cdRef：ChangeDetectorRef ）{ }

注意：导入参考-> 从'@ angular / core'导入{ChangeDetectorRef};

在值更新后执行检测更改

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

我希望这对您有帮助

Angular 2+：子组件ts变量已更改，但UI不显示更改后的值？

4 个答案: