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
в случае перенаправления проблема исчезла.