如何在 Angular-6 中重新实例化/销毁组件

Question

1. 你能从组件本身检查组件实例的存在吗？

2. 你可以销毁现有实例并创建一个新实例吗？

我的一个组件似乎有问题。当使用不同的参数连续多次访问时，组件的 ngAfterViewInit 仅在第一次触发（我假设组件被实例化时）。 后续访问不会导致触发 ngAfterViewInit， 即，看起来好像它正在重用相同的组件实例或其他东西......但是，我可以识别参数并使用更改的参数做必要的事情......

但是，如果我访问一条新路线并返回到有问题的路线/组件，它会正常工作。我可以看到它在新路由和相应组件启动之前就被破坏了。

我的目标是每次访问路线时都重新启用组件。

所以

1. 你能从组件本身检查组件实例的存在吗？

2. 你能从代码中销毁现有实例并创建一个新实例吗？

或者有没有其他方法可以解决这个问题。

我的设置

延迟加载模块 -> mdm

const routes: Routes = [

  {
    path: '',
    component: HomeComponent,

    children : [
                  { path: ':id' , component : AComponent }
    ]
  }

菜单锚链接

1. mdm/1000
2. mdm/2000 等等等等

Answer 1

肯定有另一种方法可以做到这一点。

为了回答您，您可能可以检查组件实例的存在，并且您可能可以按需重新创建它。

但你不应该。

这不仅是矫枉过正，而且您还应该让 Angular 管理注入器，否则（如果您不知道自己在做什么），您会遇到一些有趣的问题。

简单解释一下：重新加载路由不会触发组件的生命周期。一个组件的生命周期从他被实例化时开始，并在他被销毁时结束（这意味着“不再在 DOM 中”）。

当您重新加载路由时，组件不会被破坏，因此您的问题。

要解决这个问题，请在生命周期挂钩中订阅路由更改事件：

ngAfterViewInit() {
  this.router.events
    .pipe(filter(event => event instanceof NavigationEnd))
    .subscribe(event => /* do something */);
}

我已通过管道将 observable 仅监听堆栈的最后一个事件（否则，您的订阅将运行很多次）。