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

【问题标题】：Different routes, same component - why component not reload on route change?不同的路由，相同的组件 - 为什么组件不会在路由更改时重新加载？
【发布时间】：2020-08-19 02:12:21
【问题描述】：

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

假设我首先在浏览器中打开 route1。我可以在控制台中看到“父初始化”和“子初始化”文本，并且子组件呈现“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>

【问题讨论】：

你能显示你的routes吗？有路由器插座吗？
观察变量的变化，重新加载组件的OnInit。虽然我没有尝试过，但它可能对你有帮助。 medium.com/angular-in-depth/…
@David 这是一个庞大而复杂的应用程序，我只是一名初级开发人员，所以我不确定在这种情况下路由是如何工作的。有一个对象，其中路由参数是键，值是应该加载的组件。我的 2 路线和组件在此处列出。这个对象作为提供者被导入到应用模块中，然后通过 InjectionToken 注入到某种主要的架构组件中。 :/ 我不确定这可能是一个线索。
你能展示那个对象吗？包含父组件的部分。
看起来像这样：export const PAGE_ARCHITECT_COMPONENTS: ArchitectComponentsMap = { PARAM1: MyComponent, PARAM2: MyComponent, ...}

标签： angular angular-routing

【解决方案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，并且当它发出一个新值时，您可以做任何您想做的处理。

【讨论】：