ngOnChanges未触发

时间:2018-08-23 19:25:47

标签: angular typescript ngonchanges

你好,我是新手,有一点问题,这是我的代码:

import { Component, OnInit,Input, SimpleChange, OnChanges } from '@angular/core';
import { Sensor } from '../../shared/sensor.model';
import { MessageService } from '../../shared/message.service';

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

  sensors:Sensor[]=[];
  sensorsId : number[]=[];
  @Input() messages:JSON[]=[];
  constructor(private messageService: MessageService) { }

  ngOnInit() {
    setInterval(()=>{
      this.messages=this.messageService.getMqttdata();
      console.log("updating Sensors sources")
    },5000);
  }

  ngOnChanges(changes SimpleChange }) {
      console.log("sources has been modified")
  }

在ngOnInit中,我每5秒钟收集一次数据,并将这些数据存储到我的message变量中,该变量是Input(),因此应该每5秒钟触发一次ngOnChanges吗?我想念什么?

1 个答案:

答案 0 :(得分:2)

@Input属性应该是该组件的父级将传递的属性。不应从该组件内部的服务接收它。

如果是这种情况,则此服务调用应驻留在使用该组件的父组件中。

因此,如果您有一个组件(例如selectorapp-home),则在app-home的模板中,您将使用app-sensor-list,并且从那里传递messages

与此类似:

<app-sensor-list [messages]="messages"></app-sensor-list>

再次在app-home组件的TypeScript类中,您将进行服务调用:

ngOnInit() {
    setInterval(()=>{
      this.messages=this.messageService.getMqttdata();
      console.log("updating Sensors sources")
    },5000);
}