不同的路线，相同的组件 - 为什么组件在路线更改时不重新加载？

Question

我有 2 个组件，一个父组件和一个子组件。相同的父组件应该加载到 2 个不同的路由上，假设路由 1 和路由 2。父组件检查使用了哪个路由并设置一个关于 (isRoute1) 的布尔值。子组件获取此布尔值作为输入并渲染 HTML。请参阅下面的框架代码。

首先假设我在浏览器中打开route1。我可以在控制台中看到“Parent init”和“Child init”文本，并且子组件呈现“ROUTE1”。一切都按预期进行。接下来，我在浏览器中导航到路线 2（直接从路线 1），并且得到了一些意想不到的结果。在控制台中，没有显示任何内容（因此 OnInits 没有触发），但是子进程呈现了“ROUTE2”。为什么 Angular 没有触发 OnInit() 函数？我怎样才能做到这一点？我认为在路线更改时，父组件将重新加载，因此子组件也会重新加载。

// Parent component's TS
isRoute1: boolean;
ngOnInit(): void {
console.log('Parent init')
this.router$.pipe(debounceTime(1), untilDestroyed(this)).subscribe(route => {
  this.isRoute1 = route.params.id === 'route1';
});}

// Parent component's HTML
<child-component [isRoute1]="isRoute1"></child-component>


// Child component's TS
@Input()
isRoute1: boolean;

ngOnInit(): void {
  console.log('Child init')
}

// Child component's HTML
<div *ngIf="isRoute1; else route2"> ROUTE1 </div>
<div #route2> ROUTE2 </div>

Answer 1

在ngOnInit()您可以订阅以paramMap Observable检测同一路线中参数的变化：

export class HelloComponent implements OnInit {
  id: any;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.paramMap.subscribe(params => {
      this.id = params.get('id');
      // Do more processing here if needed
    });
  }
}

检查此演示： https: //stackblitz.com/edit/angular-vgz4yc

如您所见，ngOnitInit仅执行一次，但您可以观察路由参数的变化。

回答你的问题：如果路由不改变（参数改变是不够的），组件将不会重新加载。但这并不重要，因为您可以订阅paramMap，并且当它发出新值时，可以执行您想要的任何处理。