Javascript 路由器复制我的页面组件-角度

我在顶部导航栏中添加“返回主页”按钮时遇到一些问题我希望它将我的页面重置为页面的初始状态。

这是我的header.component.html，我想在这里实现一个返回主页的函数

<div class="topnav">
  <a class="active" routerLink="">{{title}}</a>  
</div>

我正在使用电影数据库API，在我的页面中有一些卡片，它允许搜索电影，多个页面显示这些卡片，我需要这个主页按钮返回到第一页，或者留下搜索结果

我只有两个组件，header.component具有重置页面当前状态并返回初始状态（不工作）的按钮，movies.component显示电影卡、按名称搜索电影并具有分页功能。我需要home函数来重置搜索名称并返回到应用程序的初始状态

有关如何放映电影的更多信息：

movies.component.ts：

//Showing page on application and redirection
  getMovies(page: number) {
    this.moviesService
      .getMovies(this.movieName, this.currentPage)
      .subscribe((paramName) => {
        page = this.currentPage;
        if (this.movieName) {
          this.searchMovies(this.movieName, this.currentPage);
        }
        if (page) {
          this.currentPage++ || this.currentPage--;
        }
        this.totalPages = (paramName as any).total_pages;
        this.movies = (paramName as any).results;
      });
  }

//Search functions bellow
  //search by query
  searchMovies(query: string, page: number) {
    this.moviesService.searchMovies(query, page).subscribe((response) => {
      query = this.movieName;
      page = 1;

      this.totalResults = (response as any).total_results;
      this.movies = [];
      this.movies = response['results'];
    });
  }
  //send value of query to the search function
  queryListener(value: string): void {
    this.movieName = value;
    this.currentPage = 1 + 1;
    this.searchMovies(value, 1);
  }
  //End of search functions

movies.service.ts：

  //Redirects
  getMovies(query: string = '', page: number) {
    if ((query = '')) {
      return this.discoverMovies(page);
    }
    if (query) {
      return this.searchMovies(query, page);
    }
    return this.discoverMovies(page);
  }

下一个方法也在movies.service.ts中，当我单击home按钮时，我想回到他那里查看发现卡

 //Show the list of movies more recent by popularity
  discoverMovies(page: number) {
    let discover = `${this.discoverUrl}?api_key=${this.apiKey}&language=${this.language}&sort_by=popularity.desc&include_adult=false&include_video=false&page=${page}`;
    return this.http.get(discover);
  }

一个简单的“

href=“localhost:4200/”

”会有所帮助，但当我使用

href

时，页面会刷新。我希望有人能帮助我

尝试使用：

<div class="topnav">
  <a class="active" [routerLink]="['/']">{{title}}</a>  
</div>

{{title}}

<div class="topnav">
  <a class="active" [routerLink]="['/']">{{title}}</a>  
</div>