Question

所以，基本上我需要在更改url参数的id后重新加载我的组件。这是我的 player.component.ts ：

import {Component, OnInit, AfterViewInit} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
declare var jQuery: any;

@Component({
  selector: 'video-player',
  templateUrl: './player.component.html',
  styleUrls: ['./player.component.less']
})

export class VideoPlayerComponent implements OnInit, AfterViewInit {
  playerTop: number;
  currentVideoId: number;

  constructor(
    private _route: ActivatedRoute,
    private _router: Router
  ) {

  }

  ngOnInit(): void {
    this._route.params.subscribe(params => {
      this.currentVideoId = +params['id'];
      console.log( this.currentVideoId );
      this._router.navigate(['/video', this.currentVideoId]);
    });
  }

  ngAfterViewInit(): void {
    if (this.videoPageParams(this.currentVideoId)) {
      console.log( "afterViewInit" );
      let params = this.videoPageParams(this.currentVideoId);
      let fakeVideoItemsCount = Math.floor(params.containerWidth / params.videoItemWidth);
      this.insertFakeVideoItems( this.currentVideoId, fakeVideoItemsCount);
      this.changePlayerPosition( params.videoItemTop );
    }

  }

  videoPageParams( id ): any {
    let videoItemTop = jQuery(`.videoItem[data-id="${id}"]`).position().top;
    let videoItemWidth = jQuery('.videoItem').width();
    let containerWidth = jQuery('.listWrapper').width();
    return {
      videoItemTop,
      videoItemWidth,
      containerWidth
    };
  }

  changePlayerPosition( videoItemTop ): void {
    this.playerTop = videoItemTop;
  }

  insertFakeVideoItems( id, fakeVideoItemsCount ): void {
    let fakeVideoItemHTML = `<div class="videoItem fake"></div>`;
    let html5playerHeight = jQuery('#html5player').height();
    let videoItemIndex = jQuery(`.videoItem[data-id="${id}"]`).index() + 1;
    let videoItemInsertAfterIndex;
    let videoItemRow = Math.ceil(videoItemIndex / fakeVideoItemsCount);
    let videoItemRowBefore = videoItemRow - 1;
    if ( videoItemIndex <= 4 ) {
      videoItemInsertAfterIndex = 0;
    } else {
      videoItemInsertAfterIndex = (videoItemRowBefore * fakeVideoItemsCount);
    }
    let videoItemInsertAfter = jQuery('.videoItem').eq(videoItemInsertAfterIndex);

    for ( let i = 0; i < fakeVideoItemsCount; i++ ) {
      $(fakeVideoItemHTML).insertBefore(videoItemInsertAfter);
    }
    jQuery(`.videoItem.fake`).css('height', html5playerHeight);

  }

}

player.component.html ：

<video
    class="video"
    preload="auto"
    [attr.data-id]="currentVideoId"
    src="">
</video>

<videos-list></videos-list>

videoList.component.html

<div class="videoItem" *ngFor="let video of videos" [attr.data-id]="video.id">
    <a [routerLink]="['/video', video.id]">
        <img [src]='video.thumbnail' alt="1">
    </a>
</div>

因此，当我点击 videoList.component.html 中的<a [routerLink]="['/video', video.id]">时，它会将路线更改为/ video / 10，但 player.component.ts中的部分操纵DOM不会再次触发 - DOM操作不会更新。

我试图通过this._router.navigate(['/video', this.currentVideoId]);手动导航到路线，但不知何故它不起作用。

问题有没有办法在每次路由参数在同一个URL中更改时运行操作DOM的函数？

Answer 1

DOM不会更新，因为ngOnInit只被触发一次，因此即使您尝试从子节点“重新导航”回父节点也不会更新，因为父节点在任何时候都没有从DOM中删除。

解决此问题的一个选择是，您可以使用Subject，当路由发生时，让我们将选择的视频ID发送给父级，父级订阅更改并执行您告诉它做的任何事情，意味着调用将更新DOM的函数，因此您可能需要重新执行的内部是ngOnInit和ngAfterViewInit

您提到过您尝试过使用

this._router.navigate(['/video', this.currentVideoId])

所以让我们来看看。可能有一些触发函数的click事件。让我们说它看起来如下，我们只是在剧中添加主题

navigate(id) {
  VideoPlayerComponent.doUpdate.next(id)
  this._router.navigate(['/video', this.currentVideoId])
}

让我们在您的父级中声明Subject，并订阅更改：

public static doUpdate: Subject<any> = new Subject();

并在构造函数中让我们订阅更改...

constructor(...) {
    VideoPlayerComponent.doUpdate.subscribe(res => {
        console.log(res) // you have your id here
        // re-fire whatever functions you need to update the DOM
    });
}

Angular 2路由参数更改，但组件不重新加载

1 个答案: