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

Question

我有 2 个组件，一个 parent 和一个 child。同一个 parent 组件应该在 2 个不同的路由上加载，比方说 route1 和 route2。 parent 组件检查使用了哪条路由并设置一个关于 (isRoute1) 的布尔值。 child 组件获取此布尔值作为输入并呈现 HTML 相关。请参阅下面的框架代码。

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

// 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，并且当它发出新值时，可以进行任何您想要的处理。

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

Different routes, same component - why component not reload on route change?

angular-routing

angular