亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

滾動經過片段時,Angular 10 獲取路由器活動片段?

滾動經過片段時,Angular 10 獲取路由器活動片段?

人到中年有點甜 2022-11-27 17:05:28
我試圖在導航中突出顯示您正在滾動過去的活動片段。將片段和導航添加到片段很簡單并且效果很好,例如:      class="nav-button unselectable"      matRipple      routerLink="/"      fragment="features"      [ngClass]="{ 'nav-active': (active_fragment | async) === 'features' }"但是路由器顯然不知道你在滾動哪個元素,所以我試圖監聽滾動事件并使用 Y 位置檢查最近的元素。但是我的著陸頁不是我的導航的孩子,所以 viewchild 不起作用,例如:導航組件:  @ViewChild('features', { static: false })  private _features: ElementRef;  @HostListener('window:scroll', ['$event'])  private _update_active_fragment(event: any) {    event.preventDefault();    console.log(window.pageYOffset);    console.log(this._features.nativeElement);  }著陸頁組件:  <app-features #features id="features"></app-features>但是 features native 元素是未定義的。我的問題是:我還能如何實現此功能?如何從導航組件中獲取元素 ref?如何獲取導航組件中 features 元素的 y 位置?
查看完整描述

1 回答

?
叮當貓咪

TA貢獻1776條經驗 獲得超12個贊

做了一個新的導航服務:


public active_fragment: BehaviorSubject<string> = new BehaviorSubject('');


  constructor(private readonly route: ActivatedRoute) {

    this.route.fragment.subscribe((frag) => {

      this.active_fragment.next(frag);

    });

  }

在我的導航組件中:


      [ngClass]="{

        'nav-active': (navigationService.active_fragment | async) === 'home'

      }"

在包含我的片段的登陸組件中:


  @ViewChild('features', { read: ElementRef })

  private _features: ElementRef;

  @ViewChild('benefits', { read: ElementRef })

  private _benefits: ElementRef;



  @HostListener('window:scroll', ['$event'])

  private _update_active_fragment(event: any) {

    event.preventDefault();

    switch (true) {

      case window.pageYOffset >=

        this._some_previous_element.nativeElement.offsetTop &&

        window.pageYOffset <= this._features.nativeElement.offsetTop: {

        this.navigationService.active_fragment.next('network-rail-feedback');

        break;

      }


      case window.pageYOffset >= this._features.nativeElement.offsetTop &&

        window.pageYOffset <= this._benefits.nativeElement.offsetTop: {

        this.navigationService.active_fragment.next('features');

        break;

      }



      default:

        break;

    }

  }


查看完整回答
反對 回復 2022-11-27
  • 1 回答
  • 0 關注
  • 104 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號