Question

我有两个组件：组件A和组件B，其中Comp B命名为＆＃34; filter＆＃34;是比较A的孩子。

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

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，则角度将重复使用相同的组件。

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

在您的情况下，在更改检测期间而不是在init期间在Component 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];
  }
}

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

1 个答案: