Angular 7 - множественные розетки: ошибка: невозможно активировать уже активированную розетку

Вот проблема, с которой я сталкиваюсь в Angular 7:

У меня есть две розетки: розетка основного приложения и вторичная розетка с именем "администрация".

Когда я хочу перейти по любой административной ссылке при запуске, она работает нормально. Но в следующий раз, когда я пытаюсь ориентироваться, angular выдает это сообщение об ошибке:

Ошибка: не удается активировать уже активированную розетку

Так, может кто-нибудь объяснить мне, почему? Я не нашел никакого решения на форумах...

Вот стекаблитц: https://stackblitz.com/edit/angular-osnnd4

Спасибо всем всем:)

5 ответов

Решение

Проблема возникает при ленивой загрузке дочерних маршрутов. Вы должны вручную отключать точку при каждом изменении маршрута.

Я изменил ваш компонент администрирования для обхода, как указано ниже. Он должен быть в состоянии работать на данный момент, пока 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();
    });
  }
}

Это может показаться глупым, но для тех, кто ищет решение этой проблемы: убедитесь, что in нет неопределенной переменной ни в одном из внутренних или дочерних выходов.

Я исправил это в своем проекте, и все вернулось к норме.

Моя проблема: в основном моя именованная розетка не деактивировалась, в моем случае я бы использовал ее для множества разных модальных окон, и хотя деактивация моей модальной розетки вручную работала, она не работала при загрузке другого пути и того же компонента в розетку.

Как указано здесь @Andreas (https://github.com/angular/angular/issues/20694). У меня не было назначенных компонентов для пустого пути, поэтому я предполагаю, что из-за этого он не мог каким-либо образом деактивировать розетку, поэтому я просто назначил emptyComponent для пути: "".

Это будет константа моего маршрутизатора:

 {
    outlet: "modal",
    path: "",
    component: EmptyComponent,
  },

Тщательно проверьте, импортировали ли вы модуль с отложенной загрузкой в его родительский модуль или какой-либо другой модуль независимо от маршрутизации. Если да, удалите оттуда его импорт . Так было в моем случае.

Моя проблема заключалась в том, что у меня есть защита входа, которая выполняет перенаправление через this.router.navigate, и охранник возвращался true после перенаправления.

Когда я изменил код, чтобы вернуть false в случае перенаправления проблема исчезла.

Другие вопросы по тегам