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

Question

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

假设我首先在浏览器中打开 route1。我可以在控制台中看到“Parent init”和“Child init”文本，子组件呈现“ROUTE1”。一切都按预期工作。接下来，我在浏览器中导航到 route2(直接从 route1)，我得到了一些意想不到的结果。在控制台中，没有显示任何内容(因此 OnInits 没有触发)但是 child 呈现“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 以检测同一 route 参数的变化:

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，并且在它发出新值时，执行您想要的任何处理。