Попытка составить меню поиска с отдельными маршрутами - PullRequest
Новая
       72

Попытка составить меню поиска с отдельными маршрутами

1 голос
/ 06 апреля 2020

Итак, я делаю это приложение Ioni c 5 и создал список с возможностью поиска, который просматривает и отображает массив, созданный в javascript. Мне интересно, как бы я go заставил каждый из этих элементов (при нажатии) перенаправлять их в соответствующую страницу приложения? Я действительно не могу понять это и не могу найти никаких ресурсов, окружающих это. Огромное спасибо. Ниже мои Javascript и Html. 

<ion-header>
  <ion-toolbar>
    <ion-icon
      class="arrowback"
      name="arrow-back"
      routerLink="/home"
      routerDirection="back"
    ></ion-icon>
    <ion-title>Search</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-searchbar animated (ionInput)="getTopics($event)"></ion-searchbar>

  <ion-list>
    <ion-item *ngFor="let topic of topics" (click)="navigateToDetails()">

      {{ topic }}  
    </ion-item>
  </ion-list>
</ion-content>

import { Router } from '@angular/router';

@Component({
  selector: 'app-search',
  templateUrl: './search.page.html',
  styleUrls: ['./search.page.scss'],
})
export class SearchPage implements OnInit {

  constructor(public router: Router) {
    this.generateTopics();
   }

  ngOnInit() {
  }

   topics: string[];

  generateTopics() {
    this.topics = [
      'Sophie Skirt - Gold',
      'Sophie Skirt - Red',
      'Jackie Top - Green ',
      'Some Random Dress',
      'What is hybrid application and why.?',
      'Procedure to remove back button text',
      'How to reposition ionic tabs on top position.',
      'Override Hardware back button in cordova based application - Ionic',
      'Drupal 8: Enabling Facets for Restful web services',
      'Drupal 8: Get current user session',
      'Drupal 8: Programatically create Add another field - Example',  
    ];
  }

  getTopics(ev: any) {
    this.generateTopics();
    let serVal = ev.target.value;
    if (serVal && serVal.trim() != '') {
      this.topics = this.topics.filter((topic) => {
        return (topic.toLowerCase().indexOf(serVal.toLowerCase()) > -1);
      })
    }
  }

  navigateToDetails(){


    this.router.navigate(['trialsearch']);
  }

}
...