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

Question

Моему приложению всегда будут нужны два столбца: один немного меньше другого. В настоящее время в моем основном компоненте приложения, шаблон просто <router-outlet></router-outlet>.

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

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

<div id="main-container">
    <div class="col three">

    </div>
    <div class="col nine">

    </div>
</div>

У меня такое ощущение, что я использую ngTemplateOutlet или, возможно, проекцию ngContent с использованием «select», но я не уверен, применимы ли эти вещи к моей ситуации. Чем больше я читаю о ng-template, тем больше я запутываюсь. Могу ли я определить этот шаблон как TemplateRef и каким-то образом получить к нему доступ в дочерних компонентах?

Может ли кто-нибудь посоветовать правильную стратегию проектирования для этой ситуации?

Answer 1

Я думаю, что нашел решение.

Мое основное приложение все еще просто имеет <router-outlet></router-outlet> для шаблона. Затем я создал новый компонент специально для настройки моего основного шаблона с двумя столбцами. Я использую ng-content с select для проецирования своего контента в соответствующие области.

контент-component.ts

<div id="main-container">
    <div class="col three">  
        <ng-content select="[leftColumn]"></ng-content>
    </div>
    <div class="col nine">
        <ng-content select="[rightColumn]"></ng-content>
    </div>
</div>

Затем в каждом из моих маршрутизируемых компонентов я оборачиваю их в свой шаблонный компонент следующим образом:

х-component.ts

<app-content-component>
    <div leftColumn>This is left content for x component</div>
    <div rightColumn>This is right content for x component</div>
</app-content-component>

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

Answer 2

Я думаю, что комментарий maxime1992 о дополнительных маршрутах - хорошая идея. Тем не менее, если в любом из ваших столбцов есть какие-либо функции, влияющие на другой столбец, может потребоваться гораздо меньше усилий, просто скопировать и вставить эту разметку на несколько страниц.

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

Answer 3

Если у вас есть 2 столбца, и каждый столбец должен быть основан на маршрутизаторе, Вы можете подписаться на router.events и затем динамически загружать компоненты:

1. Поместите немного логики в свой контроллер

   myComponentLeft: any;
   myComponentRight: any;
   
   this.router.events.subscribe( (event : Event) => {
       if (event instanceof NavigationEnd) {
           // logic here. example:
           this.myComponentLeft = UsersComponent;
           this.myComponentRight = ProfileComponent;
       }
   });
   

2. NgComponentOutlet из вашего html

   <ng-container *ngComponentOutlet="myComponentLeft"></ng-container>
   <ng-container *ngComponentOutlet="myComponentRight"></ng-container>
   

Если вам нужно передать параметры динамическим компонентам, используйте ComponentFactoryResolver вместо ngComponentOutlet