Angular 2路由参数更改，但组件不重新加载-Java 学习之路

所以，基本上我需要在更改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，但操作DOM的 player.component.ts 中的部分不会再次触发 - DOM manipulation doesn't update .

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

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

1 回答

2
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
    });
}
```
回复于 2024-05-13T14:57:59+08:00

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

1 回答

相关问题