Блог

Главная - Вопросы по программированию - Как отобразить данные на основе щелчка пользователя в angular

Как отобразить данные на основе щелчка пользователя в angular

#angular #angular-material #toolbar #angular-routing #mat-sidenav

#angular #angular-материал #панель инструментов #angular-маршрутизация #mat-sidenav

Вопрос:

Я добавил панель инструментов и боковую панель навигации, используя angular material в app.component.html .

app.component.html

 <div>
   <mat-sidenav-container class="main-container">
     <mat-sidenav #sideBarRef opened mode="side" [(opened)]='isSideBarOpen'>
     <mat-nav-list>
       <a mat-list-item href="#"> Home </a>        
       <a mat-list-item href="#"> Project Updates </a>        
       <a mat-list-item href="#"> General Updates </a>
       <a mat-list-item href="#"> Help </a>
     </mat-nav-list>
   </mat-sidenav>
   <mat-sidenav-content>
     <mat-toolbar color="primary">
        <button (click)='sideBarRef.toggle()'><mat-icon>menu</mat-icon></button>
           My Application
     </mat-toolbar>
  </mat-sidenav-content>
</mat-sidenav-container>
</div>

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

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

Как я могу это реализовать? Я ценю вашу помощь.

Комментарии:

1. поместите <router-outlet></router-outlet> внутри вашего <mat-sidenav-content> и на основе навигации маршрутизатора он покажет содержимое

Ответ №1:

Существует несколько способов реализовать это, в зависимости от архитектуры вашего приложения и конкретного варианта использования.

  • Если при нажатии пользователем на A он изменяет как данные, так и отображение, например, интерфейс администратора, позволяющий управлять пользователями, группами, приложениями с помощью 3 боковых кнопок, используйте a в своем главном компьютере, создайте один маршрут / comp для каждого дисплея и маршрутизируйте пользователя, используя router-link для каждой кнопки.
  • Если отображение остается неизменным, но кнопка просто изменяет базовые данные, используйте интеллектуальный компонент для создания своего представления, 1 компонент презентации для создания левой панели, наблюдаемой из ваших данных, отфильтрованных по нажатию кнопки с помощью ввода / вывода, и 1 компонент презентации, чтобы сделать основной дисплей с использованием данныхотправлено интеллектуальным компьютером. В качестве альтернативы используйте состояние (ngrx), действия для щелчка, селекторы для предоставления данных основному компоненту.
Метки: