Как расположить компоненты / страницы в Angular 5?

Question

Я собираюсь начать новый проект с Angular 5 (я также только изучил это за месяцы до начала этого проекта). У меня есть следующий дизайн: Clients > Edit Clients ">

Transactions > List">

Позвольте мне объяснить: У нас есть главное меню сверху (Admin, config, Account и Report) а также Siderbar каждого главного меню.

если мы нажмем admin, на боковой панели слева отобразятся пользователи, клиенты, банки и группы.

На первом изображении будут показаны администратор и клиенты, так как они используют компонент клиента / страницу. Если я нажму «Банки», ADMIN все равно будет выделен, а Банки будут выделены.

Но когда я нажимаю [Учетная запись], боковая панель будет изменена, чтобы отобразить страницы Транзакции, Клиенты, Список и Справка. Афаик, я просто знал, что у нас может быть только один шаблон в app.component.html. Но мне нужно иметь разные боковые панели для разных страниц. Должен ли я жестко закодировать боковую панель? или есть хорошие правила для этого?

2. Как выделить администратора и клиентов, если страница переходит на страницу клиентов (у меня может быть URL, например http://myproject.com/admin/clients/list)

Спасибо

Answer 1

Вы можете создать компонент боковой панели, который имеет динамические элементы, и в зависимости от того, что выбрано, вы отправляете их в качестве входных данных и отображаете их. Когда один из них выбран, вы выводите событие с выбранным элементом и обрабатываете его в родительском компоненте / контейнере.

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

Для выделения активных элементов можно использовать директиву RouterLinkActive или там, где требуется более сложное, создайте функцию для проверки URL, что-то вроде:

    isRouteActive(route: string) {
        return this.router.url.includes(route);
    }