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

Моему приложению всегда будут нужны две колонки: одна немного меньше другой. В настоящее время в моем основном компоненте приложения, шаблон просто <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 и каким-то образом получить к нему доступ в дочерних компонентах?

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

Источник

3 ответа

Решение

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

Мое главное приложение все еще просто <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>

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

Источник

Если у вас есть 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

Источник

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

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

Источник
Другие вопросы по тегам