Angular 2：一旦父组件从服务中获取数据，子组件就不会再次初始化

Question

我有两个组件：组件 A 和组件 B，其中名为“过滤器”的 Comp B 是 Comp A 的子组件。

它们基于激活的路由，从中获取 URL 的更改并将调用发送到服务器并从中获取最新的“filterMap”。

Component_A.html

<section class="abc"> 
  <filter [filterMap]=[filterMap]></filter>
  <div *ngFor="let item of courses">
    <!-- code -->
  </div> 
</section>

Component_A.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';

@Component({
    selector: 'component-a',
    templateUrl: '../template/component-a.html'
})

export class ComponentAComponent implements OnInit, OnDestroy {
constructor(private _activatedRoute: ActivatedRoute,
            private _router: Router) { }

ngOnInit() {
        this._querySubscription = this._activatedRoute.queryParams
            .subscribe(params => {
                    this.setQueryParams(params);
                    this._courseService.getData()
                        .subscribe(res => {
                            if (res.data) {
                                this.courses = res.data.courseDTOList;
                                this.filterMap = res.data.filterMap;
                            }

                        });                
            });
    }
}

Component_B.html

<div class="xyz">
  <span> Filter Result </span>
  <section class="filter-section" *ngFor='let filter of filterData>
    <!-- Code -->
  </section>
</div>

Component_B.ts

import { Component, Input, Output, EventEmitter, OnInit, AfterViewInit } from "@angular/core";
import { Router, ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';

@Component({
    selector: 'filter',
    templateUrl: '../template/course-filter.html'
})

export class FilterComponent implements OnInit{

@Input() filterMap: any;

ngOnInit() {
        if (this.filterMap[0])
            this.filterData = this.filterMap[0];
    }
}

问题：

重新加载页面后，两个组件都会被初始化并提供所需的输出。

如果 URL 发生更改，则会发送对服务器的调用，并且 filterMap 来自服务，但 Component_B 不会再次初始化，并且过滤器屏幕每次都保留旧数据。

Answer 1

这是预期的行为，默认情况下，如果路由的参数更改但路由本身没有更改，则角度重用组件。

例如像route/:id 这样的路由，如果用户从route/1 导航到route/2，angular 将重用相同的组件。

这是一种默认行为，可以通过实现您自己的RouteReuseStrategy 来覆盖。您可以check this获取有关此方法的更多信息。

在您的情况下，在更改检测期间而不是在初始化时在组件 B 中定义您的 filterMap 就足够了：

@Component({
  selector: 'filter',
  templateUrl: '../template/course-filter.html'
})

export class FilterComponent implements OnChanges {

  @Input() filterMap: any;

  ngOnChanges() {
    if (this.filterMap && this.filterMap[0])
      this.filterData = this.filterMap[0];
  }
}