Angular7 + OnChanges 父子组件刷新_angular 刷新子组件_winner_corl的博客

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>
	<app-map #mapCList [paramYear]="paramYear"></app-map>
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.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！！ 
                    需求：如果是父组件的下拉时间变化，自组件也要需要根据修改后的时间重新查询和渲染页面，这就要求父组件调用子组件refresh方法，从而实现上述功能！同时换一种思路，这是一种监听，监听的是一个可变变量，下面介绍两种调用方法！1.@ViewChild1.1）index.component.html&lt;nz-select style="width: 70px;" [(ngModel)...
				角度hmr惰性组件
此示例显示了如何使用Angular HMR自动重新加载惰性路由和惰性（动态加载）组件。 这对于大型Angular应用程序非常有用，这些应用程序在重新加载时需要一段时间进行JIT编译。
 请注意，在下面的动画中，在a.component.ts源代码中进行更改后的瞬间，仅重新加载了应用程序中已经显示的“ A”组件。
重新加载惰性路由
这个怎么运作
大多数魔术都在。 将通过路由器延迟加载的每个模块都将使用此帮助程序类来为该模块启用HMR。 这是在用法：
  export class CModule {
    constructor(moduleRef: NgModuleRef<CModule>) {
      HmrModuleHelper.enableHmrRouterNgModule(module, moduleRef);
  HmrModuleH
				angular子组件发生变化后使用EventEmitter主动通知父组件环境&版本一、需求&解决方案复杂例子：解决方案1：表单提交成功后调用@input 传过来的父组件的方法。解决方案2：表单提交成功后子组件使用EventEmitter主动通知父组件自己调用方法。二、详细的例子思路：创建parent, child两个组件，child详细代码1.parent2.child三、总结
环境&版本
angular9
一、需求&解决方案
后台类的项目中，界面往往十分复杂，需要有复杂的
				一、新建一个子组件ng g component child二、子组件中添加要被调用的方法child.component.tsexport class ChildComponent implements OnInit {  constructor() { }  ngOnInit() {
  }  greeting(name:string){
    console.log('hello'+name);
				constructor(private zone:NgZone) {
    // enable to for time travel
    this.appStore.subscribe((state) =&gt; {
        this.zone.run(() =&gt; {
            console.log('enabled time travel');
				刚学angular，写了一个前台的表格数据增删改查，但点查询后，表格数据不能及时显示，我发现只要在我的界面上随意点任意一个键或者敲一个空格，查询的数据就出来了。隐约觉得是组件没刷新的问题，暂时找到下面的解决方法：
1.在ts文件引入侦测组件变化的对象ChangeDetectorRef
（关于ChangeDetectorRef ，这个上有写https://www.cnblogs.com/elev...
				一、父子组件传值篇
@Input() 和 @Output() 为子组件提供了一种与其父组件通信的方法。 @Input() 允许父组件更新子组件中的数据。相反，@Output() 允许子组件向父组件发送数据。
父组件向子组件传值—@Input
子组件或指令中的 @Input() 装饰器表示该属性可以从其父组件中获取值。
父组件 app.component.ts
import { Component } from '@angular/core';
@Component({
  selector: 'a