Как показать контент с помощью боковой панели навигации в Angular?

введите здесь описание изображения

Всем привет,

Я хочу отображать некоторый статический контент всякий раз, когда мы щелкаем любой индекс в левом меню, как на прикрепленном изображении. Кроме того, содержимое должно быть на одной странице, как в этой ссылке https://docs.spring.io/spring-framework/docs/current/spring-framework-reference/core.html#beans-annotation-config. Всякий раз, когда я нажимаю любой из индексов, соответствующий контент должен быть виден пользователю при прокрутке страницы. Может ли кто-нибудь предложить мне идею для достижения этого с помощью Angular и начальной загрузки? Заранее спасибо.


angular sidenav angular-bootstrap
person Olive    schedule 06.10.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Для показа контента с помощью боковой панели

.html

<div class="sidebar"> 
   <li (click)=""goToList('content1')>Side bar list 1</li>
</div>
<div id="content1" class="content1">
    CONTENT
</div>

.ts

goToList(id: any) {
    const element: HTMLElement = document.getElementById(id);
    if (element) {
         element.scrollIntoView({ behavior: 'smooth' });
     }
  }

Попробуйте этот метод, он будет работать нормально, как вы хотите

person Dako patel    schedule 06.10.2020
comment
Большое спасибо за ответ. Попробую и дам вам знать мои комментарии - person Olive; 06.10.2020
comment
Добро пожаловать ! @Olive, дай мне знать, если возникнут проблемы - person Dako patel; 06.10.2020
comment
Да работает отлично :). Большое спасибо. И еще одна вещь, которую я хочу, чтобы боковая панель была слева, а содержимое должно быть справа, как на изображении. Можете ли вы предложить мне идею для достижения этого? - person Olive; 08.10.2020
comment
если возможно, вы можете опубликовать свой ответ здесь, пожалуйста - person Olive; 08.10.2020
comment
Я очень просто объясню, как это может быть очень большой процесс, поэтому я могу предложить или показать пример, если мы можем связаться с вами! - person Dako patel; 08.10.2020
comment
Я уверен, вы можете запланировать встречу для этого письма [email protected] - person Olive; 08.10.2020
comment
Хорошо, я отправлю позже - person Dako patel; 08.10.2020