角度链接改变URL但不改变内容

Question

我有一个智能组件，它调用一个从api检索所有信息的服务，并加载一组显示所有信息的哑组件。

当初始化时，智能组件从url中获取id，并将其发送给服务，以从api中获取所有数据，并且一切都按照预期工作，但是当我单击页面上的链接之一，该链接应该加载相同的页面但不同的id，url改变了，但不改变视图，并且我在控制台上也没有看到任何activity。

这是智能组件：

export class MovieDetailsPageComponent implements OnInit {
  movieId: string;
  movie: any;
  credits: any;
  reviews: any;
  recommendations: any;

  constructor(private route: ActivatedRoute, private api: ApiService) {}

  async ngOnInit() {
    // this.route.params.subscribe((params: Params) => (this.movieId = params.id));
    this.movieId = this.route.snapshot.paramMap.get('id');
    this.movie = await this.getMovieDetails(this.movieId);
    this.credits = await this.getMovieCredits(this.movieId);
    this.reviews = await this.getMovieReviews(this.movieId);
    this.recommendations = await this.getMovieRecommendations(this.movieId);
  }


  async getMovieDetails(movieId) {
    return await this.api.getMovieDetails(movieId);
  }

  async getMovieCredits(movieId) {
    return await this.api.getMovieCredits(movieId);
  }

  async getMovieReviews(movieId) {
    return await this.api.getMovieReviews(movieId);
  }

  async getMovieRecommendations(movieId) {
    return await this.api.getMovieRecommendations(movieId);
  }
}

这是显示链接的哑组件：

export class RecommendationsComponent implements OnInit {
  @Input() recommendations: any;
  constructor() {}

  ngOnInit(): void {}
}

<div class="content">
  <h4 class="h4">
    You may like
  </h4>
  <app-posters [movies]='recommendations.results'></app-posters>
</div>

这是从“第一个”哑组件加载的“第二个”哑组件：

<div>
  <a routerLink="/movie/{{ movie?.id }}">
    <img
      class="img-fluid rounded"
      src="{{ movie?.backdrop_path | apiImages }}"
    />
    <p>{{ movie?.original_title }}</p>
  </a>
</div>

实际上，有更多的哑组件从智能组件，直到实际呈现链接的一个，不确定这是否会影响到主页，我已经让它工作良好到目前为止。

编辑：

这是我的路由模块：

const routes: Routes = [
  { path: 'home', component: UpcomingPageComponent },
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'movie/:id', component: MovieDetailsPageComponent }
];

Answer 1

我想我已经想出了如何解决，但如果有人知道更好的替代方案可以分享它，我会很感激。

在onInit函数上，当加载智能组件时，我订阅了URL的id，并包含了订阅中的所有函数（请原谅我的技术水平不高的解释）：

async ngOnInit() {
    console.log('vuelta a empezar');
    this.route.params.subscribe(async (params: Params) => {
      this.movieId = params.id;
      await this.doThings(this.movieId);
    });

toDo函数（等待重构）只是将前面的所有函数包装在里面：

async doThings(movieId){
  this.movie = await this.getMovieDetails(movieId);
    this.credits = await this.getMovieCredits(movieId);
    this.reviews = await this.getMovieReviews(movieId);
    this.recommendations = await this.getMovieRecommendations(movieId);
}

Answer 2

如果我没有理解错的话，您希望保留在相同的组件/页面上，但根据参数中的新ID更新内容。

我最近遇到了一个类似的问题--基本上，问题是如果路由相同（即使id更改），任何东西都不会重新加载。我发现的最好的解决方案是欺骗angular首先导航到一个假url“/”，然后返回到具有新ID的当前url。下面是我如何做到的一个例子：

this.router.navigateByUrl('/', {skipLocationChange: true}).then(()=>
this.router.navigate(['/YOURURL/' + YOURID]));