Использование ngIf в файле Ioni c html для отображения разных карточек на основе URL - PullRequest
Новая
       5

Использование ngIf в файле Ioni c html для отображения разных карточек на основе URL

0 голосов
/ 16 июня 2020

Я начал свой проект Ioni c с помощью шаблона бокового меню ioni c. В этом шаблоне появляется гамбургер-меню, и при нажатии на различные параметры изменяются конечные точки / 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--;
    }
  }

}
...