Angular 7 - Multiple outlets : Error: Cannot activate an already activated outlet

Question

这是我在使用 Angular 7 时遇到的问题：

我有两个插座：主应用程序路由器插座和一个名为 'administration' 的辅助插座。

当我想在开始时浏览任何管理 link 时，它工作正常。但是下次，当我尝试导航时，angular 会抛出此错误消息：

Error: Cannot activate an already activated outlet

那么，有人可以解释一下为什么吗？我还没有在论坛上找到任何解决方案...

这是一个 stackblitz：https://stackblitz.com/edit/angular-osnnd4

谢谢大家:)

Answer 1

延迟加载子路由时出现问题。每次更改路线都必须手动停用插座。

我已修改您的 AdministrationComponent 以解决以下问题。目前应该可以使用，直到Angular有办法解决问题。

import { Component, OnInit, ViewChild } from '@angular/core';
import { RouterOutlet, Router, ActivationStart } from '@angular/router';

@Component({
  selector: 'app-administration',
  templateUrl: './administration.component.html',
  styleUrls: ['./administration.component.css']
})
export class AdministrationComponent implements OnInit {

  @ViewChild(RouterOutlet) outlet: RouterOutlet;

  constructor(
    private router: Router
  ) { }

  ngOnInit(): void {
    this.router.events.subscribe(e => {
      if (e instanceof ActivationStart && e.snapshot.outlet === "administration")
        this.outlet.deactivate();
    });
  }
}

Answer 2

这可能很愚蠢，但对于任何正在寻找解决方案的人来说：确保在任何内部或子出口中都没有未定义的变量。

我在我的项目中修复了这个问题，一切都恢复正常了。

Answer 3

我的问题：基本上我的命名出口没有停用，在我的情况下，我会将它用于一堆不同的模态，虽然手动停用我的模态出口会起作用，但在将不同的路径和相同的组件加载到出口时它不起作用，所以我不能回收我的组件，在我的例子中是模态组件。

正如@Andreas 在这里指出的那样 (https://github.com/angular/angular/issues/20694#issuecomment-595707956)。我没有为空路径分配任何组件，所以我猜它无法以某种方式停用插座，所以我只是为路径分配了一个空组件：“”。

第一种方法：为了解决这个问题，我将为“”或非真实路由使用一个空组件

app-router-module.ts
...
 {
    outlet: "modal",
    path: "", 
    component: EmptyComponent, 
  },
...

另一种方法：如果需要，您可以在关闭视图时改为执行此操作

model.component.ts

this.router.navigate([
  {
    outlets: {
      modal: null,
    },
  },
]);

无论路由器停用哪种方式，更好的是我认为您应该使用第二个示例，因为它会停用并破坏视图。在我的例子中，我有一个 json 和非真实路由，所以我只需要将它们映射到空值。

Answer 4

彻底检查您是否在其 父模块 或其他一些模块中导入了 延迟加载模块 ，而不管路由如何。如果是这样，从那里删除它的导入。 我的情况就是这样。

Answer 5

我的问题是我有一个登录守卫，它通过 this.router.navigate 执行重定向，并且守卫在重定向后 returning true。

当我在重定向的情况下将代码更改为 return false 时，问题就消失了。

Angular 7 - Multiple outlets : Error: Cannot activate an already activated outlet

Angular 7 - Multiple outlets : Error: Cannot activate an already activated outlet

children

routerlink

router-outlet

angular7