Question

我正在将一个输入指令的值从subscribe块中的父组件更改为我的子组件。但是，在子级中未检测到新值。

子组件已经实现OnChanges并正确定义了输入指令。

下面是我的组件的伪代码。从实际简化代码以便于理解上下文。

父组件HTML：

<h1>PARENT</h1>
<button (click)="buttonClicked()">NEXT</button>
<child-component  [inputChildVar]="parentValue"></child-component>

父组件TS：

ngOnInit() {
    this.parentValue= {
      "currentPageNo":5,
      "currentPageData": [{"DEVICE":"Kernel1","RANGE":"500Hz"}, {"DEVICE":"Kernel2","RANGE":"500Hz"}]
    }
}

buttonClicked()
{
  this.parentService.ServiceMethod().subscribe(data=>{
     this.parentValue= {
        "currentPageNo":data.currentPageNo,
        "currentPageData":data.array
      }
     this.parentValue=JSON.parse(JSON.stringify(this.parentValue))
  })
}

儿童组件HTML：

<h1>inputChildVar<h1>

儿童成分TS：

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

@Component({ 
    selector: 'child-component', 
    template: '<h1>inputChildVar<h1>', 
})

export class ChildComponent implements OnInit,OnChanges 
{ 
    @Input() inputChildVar

    constructor() { } 
    ngOnChanges(){ 
        console.log(this.inputChildVar) 
    } 

    ngOnInit() {} 
}

预期结果：从parentService.ServiceMethod获得响应时，更改parentValue时，新值应通过子组件反映在屏幕上。

实际结果：屏幕上没有任何变化

Answer 1

当我在StackBlitz中进行测试时，对我来说效果很好，请看一下：

Parent Component HTML：

<h1>PARENT</h1>
<button (click)="buttonClicked()">NEXT</button>
<app-child  [inputChildVar]="parentValue"></app-child>

Parent Component TS：

import { Component } from '@angular/core';
import { DataService } from './data.service';

/** @title Simple form field */
@Component({
  selector: 'form-field-overview-example',
  templateUrl: 'form-field-overview-example.html',
  styleUrls: ['form-field-overview-example.css'],
  providers: [DataService]
})
export class FormFieldOverviewExample {

  constructor(private service: DataService) {

  }
  parentValue = {
    "userId": 112,
    "id": 1121,
    "title": "masxsat",
    "body": "teasdas"
  }
  buttonClicked() {
    this.service.getData()
    this.service.data.subscribe(value => {
      console.log(value)
      this.parentValue = value;
    })
  }
}

Child Component HTML：

<h1>Child</h1>
<div>
{{inputChildVar | json}}
</div>

Child Component TS：

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit, OnChanges {

  @Input() inputChildVar

  constructor() { }
  ngOnChanges() {
    console.log(this.inputChildVar)
  }
  ngOnInit() { }
}

Data.Service.ts：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class DataService {

  data = new BehaviorSubject(null)

  constructor(
    private http: HttpClient
  ) { }


  getData() {
    this.get()
      .then(response => {
        this.data.next(response);
      })
  }

  get(): Promise<any> {
    const url = `https://jsonplaceholder.typicode.com/posts/1`;
    return this.http.get(url)
      .toPromise()
      .catch(this.handleError);
  }

  // handler for error in URL
  private handleError(error: any): Promise<any> {
    return Promise.reject(error.message || error);
  }
}

StackBlitz

Answer 2

我能够通过changeDetectorRef触发更改检测来解决此问题。现在正在工作。从以下位置获取了参考：Angular 2 - View not updating after model changes

在父级的订阅块中更改@Input指令的值时，在子组件中未检测到更改

2 个答案: