Question

我有两个部分，父母和孩子。相同的父组件应该在2条不同的路由上加载，例如route1和route2。父组件检查使用了哪个路由，并设置有关（isRoute1）的布尔值。子组件将此布尔值作为输入并呈现有关的HTML。请参阅下面的框架代码。

首先让我在浏览器中打开route1。我可以在控制台中看到“ Parent init”和“ Child init”文本，并且子组件呈现“ ROUTE1”。一切都按预期进行。接下来，我在浏览器中导航到route2（直接从route1），并且得到了一些意外的结果。在控制台中，什么都没有显示（因此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，并在它发出新值时进行所需的处理。

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

1 个答案: