Блог

Главная - Вопросы по программированию - Маршрутизация Angular11 и прокрутка до привязки

Маршрутизация Angular11 и прокрутка до привязки

#angular #bootstrap-4 #routes #anchor

#angular #bootstrap-4 #маршруты #привязка

Вопрос:

Привет всем, я новичок в Angular,

Я использую AngularCLI и версию Angular 11 . У меня есть простой Bootstrap 4 шаблон, и я хотел бы повторно использовать его для своего Angular 11 приложения.

Теперь шаблон выглядит примерно так:

 <html>
 <header>
  ....
  <ul>
    <li><a href="#contact">CONTACT</a></li>
    <li>GROUP</li>
  </ul>
 </header>

 <main>
   <section id="group">
   ....................
   </section>

   <section id="contact>
   ....................
   </section>
 </main>

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

Теперь я помещаю его в Angular, и все работает хорошо, но теперь я хочу перенаправить на компонент, который будет заполнен данными, поступающими с сервера. Поэтому я пытаюсь написать:

 <li><a href="#contact" (click)="scroll(contact)">CONTACT</a></li>
.....
.....

<section id="group">
   ..........
</section>
<section #contact id="contact>
  <router-outlet></router-outlet>
</section>

В component.ts:

 scroll(el: HTMLElement) {
  el.scrollIntoView();
  el.setAttribute("class", "active");
}

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

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

В любом случае, я думаю, что моя угловая архитектура неверна.. может router-outlet быть, он должен содержать всю страницу целиком, а в разделах мне нужно будет поместить что-то вроде *ngIf , чтобы посмотреть, есть ли данные для отображения?

Спасибо

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

1. вы импортировали RouterModule в свой модуль приложения?

2. Да, конечно, но маршрутизация работает, а автопрокрутка к привязке — нет! Если я вручную прокручу страницу вниз, я увижу вставку «Мой компонент» в нужном месте… но вызов обновит мою страницу, и страница вернется к верхнему заголовку

3. могу я попросить вас поместить свой код в stackblitz?

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