Angular7 + OnChanges 父子组件刷新

需求：

如果是父组件的下拉时间变化，自组件也要需要根据修改后的时间重新查询和渲染页面，这就要求父组件调用子组件refresh方法，从而实现上述功能！同时换一种思路，这是一种监听，监听的是一个可变变量，下面介绍两种调用方法！

1.@ViewChild

1.1）index.component.html

<nz-select style="width: 70px;" [(ngModel)]="paramYear" class="select-con"
		   (ngModelChange)="refreshByYear()">
	<nz-option *ngFor="let year of yearsList" nzValue="{{year}}" nzLabel="{{year}}"></nz-option>
</nz-select>
...
...
<div>
	<app-map #mapCList [paramYear]="paramYear"></app-map>
</div>

1.2）ts

export class IndexComponent implements OnInit, AfterViewInit {

    @ViewChild('mapCList') _mapCList: MapComponent;

    public yearsList: any[] = [];

    
    ngOnInit() {
        var date = new Date;
        var year = date.getFullYear();
        for (var i = 0; i < 10; i++) {
            this.yearsList.push(year);
            year = year - 1;
        }

    ...
    ...
    }

   .....


    refreshByYear() {
         this._mapCList.refreshByYear();
    }

}

2.监听

2.1) OnChanges

export class ChartYet2Component implements OnInit, OnChanges {
    @Input('paramYear') paramYear: string;

    
    /**
     * 通过监听@Input参数变化，重新加载页面，获取数据
     *
     * @param changes
     * @return null
     * @Auth : Xuhy,2019/6/25 10:42
     */
    ngOnChanges(changes: SimpleChanges): void {
        this.refreshByYear();
    }


    ngOnInit() {
        //图形结构化
        this.chartData(this.componentGuid);
    }

    /**
     * 通过规则componentGuid获取柱状图数据
     *
     * @param componentGuid
     * @return
     * @update 2019/6/10 19:50
     */
    chartData(componentGuid: string): void {
        ......
    }

    /**
     * 通过父组件的时间切换，重新刷新子组件获取父组传入的新的时间对应数据
     *
     * @param null
     * @return null
     * @Auth : Xuhy,2019/6/25 9:55
     */
    public refreshByYear(): void {
        this.ngOnInit();
    }
}

加载顺序是先OnChanges，里面调用refresh调用ngOnInit，然后组件自己还会执行ngOnInit！！