html - 在 Ionic html 文件中使用 ngIf 根据 URL 显示不同的卡片

Question

我从 ionic sidemenu 模板开始了我的 Ionic 项目。使用此模板，会出现一个汉堡菜单，单击不同的选项会更改本地服务器上的端点/URL。我正在尝试根据当前 URL 更改屏幕上显示的内容，但似乎如果我继续切换 URL，旧内容永远不会消失，并且会不断显示越来越多的内容。我想知道是否有办法隐藏/删除此内容，除非您在该屏幕上，或者是否有办法从汉堡菜单注册点击事件以避免完全使用 URL。

<ion-card-title id="collegeCardHome" *ngIf="docURL == 'http://localhost:8100/folder/Home' ">
  {{collegeInfoArray2[0].name}}
</ion-card-title>
<ion-card-title id="collegeCardLikes" *ngIf="docURL == 'http://localhost:8100/folder/Favorites'">
  {{likedCollegesArray[0].name}}
</ion-card-title>
<ion-card-title id="collegeCardDislikes"*ngIf="docURL == 'http://localhost:8100/folder/Dislikes'">
  {{dislikedCollegesArray[0].name}}
</ion-card-title>

谢谢！

编辑 - 获取 URL 的代码在我的 .ts 文件中！

public docURL = document.URL;

编辑 2 - 从我的 TS 文件中添加代码

export class FolderPage implements OnChanges, OnInit {

  public folder: string;
  
  public collegeInfoArray2 = [
    {
      name : 'Name1',
      size : 'Size1'
    },
    {
      name : 'Name2',
      size : 'Size2' 
    },
    {
      name : 'Name3',
      size : 'Size3'
    }
  ]
  public sizeOfCollegeInfoArray = this.collegeInfoArray2.length;

  public likedCollegesArray = [];
  public dislikedCollegesArray = [];

  public link:HTMLElement = document.getElementById("testingHome");

  constructor(private activatedRoute: ActivatedRoute) { }
  public docURL;

  ngOnChanges() {
    this.docURL  = document.URL;
  }

  ngOnInit() {
    this.folder = this.activatedRoute.snapshot.paramMap.get('id');
    //this.link.className = "showItem";
  }

  likeFirst() {
    if (this.sizeOfCollegeInfoArray > 0) {
      this.likedCollegesArray.push(this.collegeInfoArray2[0]);
      this.collegeInfoArray2.splice(0,1);
      console.log(this.likedCollegesArray[0].name);
      this.sizeOfCollegeInfoArray--;
    }
  }

  dislikeFirst() {
    if (this.sizeOfCollegeInfoArray > 0) {
      this.dislikedCollegesArray.push(this.collegeInfoArray2[0]);
      this.collegeInfoArray2.splice(0,1);
      console.log(this.dislikedCollegesArray[0].name);
      console.log(this.dislikedCollegesArray[0].size);
      this.sizeOfCollegeInfoArray--;
    }
  }

}

标签： htmlangularionic-framework