Блог

Допустим, на веб-странице есть три категории — Континент, Страна, штат. В настоящее время я работаю над кнопкой, которая была размещена на другой странице. Я хочу, чтобы при нажатии кнопки моя страница автоматически перенаправлялась на страницу категорий и переходила к третьему разделу, т.Е. К разделу состояния. Я немного новичок в Angular и перепробовал множество методов, упомянутых на других сайтах, таких как использование routerLink, навигация, маршруты, но ничего не сработало в соответствии с моими ожиданиями на данный момент. Может кто-нибудь, пожалуйста, помочь в этом или поделиться некоторыми уже разработанными ссылками.

Заранее спасибо.

Это просто. Передайте состояние в маршрутизаторе, подобное этому, на первой странице

 <button [routerLink] = "['/page2', {pageSec: 'section2'}]">Go to section 2</button>

<br>
<br>

<button [routerLink] = "['/page2', {pageSec: 'section3'}]" >Go to Section 3</button>
 

Затем на второй странице используйте активированный маршрут, чтобы получить объект состояния от маршрутизатора. Используйте декоратор ViewChild для связи с DOM. Подпишитесь на активированные параметры маршрута, наблюдаемые в ngAfterInit, получите нужный вам параметр и перейдите в режим просмотра. Проверьте фрагмент ниже, чтобы понять, что я имею в виду

 @Component({
  selector: 'app-page2',
  templateUrl: './page2.component.html',
  styleUrls: ['./page2.component.scss']
})
export class Page2Component implements AfterViewInit {
  constructor(private http: HttpClient, private activeRoute: ActivatedRoute, ) { }
  @ViewChild('container') container: ElementRef<HTMLElement>;

  ngAfterViewInit(): void {

    this.activeRoute.params.subscribe(param => {
      // alert(param.pageSec)
      if(param.pageSec){
        const section = this.container.nativeElement.querySelector(`#${param.pageSec}`)
        console.log(section)

        section?.scrollIntoView()
      }
    })

  }

}
 

На странице 2 Html сделайте и селектор. В этом примере я создал свой контейнер селектора. Затем дайте каждому из ваших разделов идентификатор. Идентификатор — это то, на что прокручивается ваша страница.
Ваш html должен выглядеть следующим образом.

 <div #container>

  ............
  <div id="section1">
    .......
  </div>

  <div id="section2">
    ....
  </div>

  <div id="section3">
    .....
  </div>
</div>
 

И это все !!!!. Убедитесь, что вы используете ngAfterInit вместо ngOnInit, потому что элементы Dom не будут доступны сразу после инициализации компонента