1

首先，我在 Angular 7 中工作，我得到了以下“应用程序”： 在此处输入图像描述

顶部栏是日期过滤器，可以选择日期“From”（葡萄牙语中的 De）和日期“To”（葡萄牙语中的 Até）。假设通过选择这些日期，图形仅显示相应的时间间隔，例如：2019/01/01 到 2019/02/02 天。就那么简单。所以现在我将展示我用来将数据从条形组件 ( filtro-data.component) 传递到父组件 ( charts-report.component)，然后从父组件传递到许多图形的逻辑，但现在我们只使用 ( dimensao-component)。我只使用 de From 输入将其提供给缩放：分钟。

filtro-data. component.ts

export class FiltroDataComponent implements OnInit {

  dateDe : any;
  dateAte : any;

  @Output() dateDeEvent = new EventEmitter<string>()

  constructor() { }

  ngOnInit() { }

  sendMessage() {
    this.dateDeEvent.emit(this.dateDe);
  }
}

filtro-data.component.html

<input id="dateDe" name="dateDe" [(ngModel)]="dateDe" type="date" required>
<input type="date" id="dateAte" name="dateAte" [(ngModel)]="dateAte" required>
<button (click) = "sendMessage()">Aplicar</button>~

所以在这里我准备了来自输入的数据以将它们发送给父级。这是父母：

charts-report.component.ts

export class ChartsReportComponent implements OnInit {
  @ViewChild(DimensaoComponent) dimensaoC: DimensaoComponent; //to import the component dimensao

  constructor(private formbulider: FormBuilder, private route: ActivatedRoute) {  }

  dateDe: any;

  receiveMessage($event) {
    this.dateDe = $event;
    this.dimensaoC.updateChart() //this will make sense
  }

  ngOnInit() {}
}

charts-report.component.html

<app-filtro-data (dateDeEvent)="receiveMessage($event)"></app-filtro-data>
 <app-dimensao [dateDe]="dateDe"></app-dimensao>

有了所有这些，我会将信息发送到我的组件 dimensao...

dimensao.component.ts

@Input() dateDe : any;

(...)
        time: {
            unit: 'day',
            min: this.dateDe
        }
(...)
   updateChart(){
    this.LineChart.update();
  }

我做了一些“测试”，dimensao 组件收到了我在 filter-date.component 中选择的日期，所以一切都很好......但是当我点击按钮“Aplicar”时，图形不会更新，即使使用执行此操作的功能（请参阅charts-report.component 中的receiveMessage）...我尝试了很多事情，但没有任何解决办法。你知道我能做什么吗？我只想用“min”中的新数据更新图形。谢谢你。

4

0 回答 0