Неправильный компонент загружен в mat-accordion с «вложенным» маршрутизатором

Question

Я использую mat-accordion с router-outlet и наблюдаю странное поведение.Ниже приведен пример реализации моего варианта использования.https://stackblitz.com/edit/angular-material-accordion-with-router

В этом примере компонент панели 3 и компонент панели 4 имеют router-outlet.Теперь в первый раз навигация работает как положено.Но если я сверну эти панели и снова попытаюсь открыть их, я обнаружу, что содержимое панели 4 отражается на панели 3.

Я не уверен, что это ошибка в angular-router или я что-то здесь не так делаю,

Answer 1

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

Ваш шаблон размещает все четыре компонента панели на странице и дваиз них (3 и 4) определяют торговые точки.Поэтому у вас есть два выхода на вашей странице.Так как они не названы, они оба пытаются быть выходом по умолчанию или «основным» выходом для вашего маршрутизатора, поэтому любая маршрутизация, которая не направлена ​​на именованный выход (который является всей вашей маршрутизацией), переходит к одному из них (или, возможно,оба - я не знаю, как Angular справится с этим).

Вы также используете маршруты для компонентов, которые не являются маршрутами (панели 1 и 2).Например, если вы откроете панель 1, а затем откроете инспектор DOM, вы увидите другой компонент панели 1 в розетке для панели 3 или 4.

Исправление заключается в удалении компонентов, которые не являютсяфактические маршруты от маршрутизации - «panel1» и «panel2», а также назовите эти два выхода и выберите эти выходы, используя конфигурации маршрутизатора и соединения.

Stackblitz