Перенаправить на другую страницу, используя угловой 6 - PullRequest
Новая
       14

Перенаправить на другую страницу, используя угловой 6

0 голосов
/ 21 сентября 2018

Я использую шаблон, который я недавно купил, для создания моего ионного + углового приложения.Моя проблема в том, что я новичок в angular и пытаюсь перенаправить пользователя при нажатии кнопки.Я исследовал и понял, что он обнаруживает щелчок, но не перенаправляет.Я попытался импортировать «роутер» и другие действия по устранению неполадок, но он не работает для меня.Вот мой html и ts файл.

html 

<!--Theme Google Card - Full Image Cards-->
<ion-content padding-top>
  <ion-grid no-padding>
 <ion-row *ngIf="data != null">
 <ion-col col-12 col-md-6 col-lg-6  *ngFor="let item of data.items;let i = index">
 <ion-card text-left box-shadow margin-bottom>
          <!--Card Image-->
  <div card-image>
  <img [src]="item.image" />
  <div watch-now text-center (click)="onEvent('onItemClick', item, $event)">
  <button ion-button button-icon icon-start>
  <ion-icon icon-small [name]="item.icon"></ion-icon>
   {{item.iconText}}
  </button >
   </div>
   </div>
          <!--Card descriptiom-->
  <ion-card-content>
  <ion-card-title text-center>
                <!--Card Subtitle-->
 <h1 card-title>{{item.title}}</h1>
                <!-- Icon Rating Star -->
  <ion-icon *ngFor="let star of item.ratingStar.iconsStars; let i = index" (click)="onStarClass(item.ratingStar.iconsStars, i, $event)">
  <i icon-small *ngIf="star.isActive" class="icon {{star.iconActive}}"></i>
 <i icon-small *ngIf="!star.isActive" class="icon {{star.iconInactive}}"></i>
  </ion-icon>
                <!-- Reviews Star -->
 <span span-medium>{{item.reviews}}</span>
                <!--Card Body Text-->
  <p margin-top card-body-text>{{item.description}}</p>
  </ion-card-title>
  </ion-card-content>
  </ion-card>
  </ion-col>
  </ion-row>
  </ion-grid>
</ion-content>

TS 

import { Component, Input, ViewChild } from '@angular/core';
import { IonicPage, Content } from 'ionic-angular';

@IonicPage()
@Component({
    selector: 'google-card-layout-1',
    templateUrl: 'google-card.html'
})
export class GoogleCardLayout1 {
    @Input() data: any;
    @Input() events: any;
    @ViewChild(Content)
    content: Content;
    slider = {};

    constructor() { }

    slideHasChanged(slider, index): void {
        this.slider[index] = slider;
        if (2 == slider._activeIndex) {
            if (this.data.items) {
                this.data.items.splice(index, 1);
            } else {
                this.data.splice(index, 1);
            }
        }
    }

    onStarClass(items: any, index: number, e: any) {
      if (e) {
        e.stopPropagation();
      }
      for (var i = 0; i < items.length; i++) {
        items[i].isActive = i <= index;
      }
      this.onEvent("onRates", index, e);
    };

    onClickEvent(index): void {
        if (this.slider[index]) {
            this.slider[index].slidePrev(300);
        }
    }

    onEvent(event: string, item: any, e: any) {
        if (e) {
            e.stopPropagation();
        }
        if (this.events[event]) {
            this.events[event](item);
        }
    }
}

Ответы [ 2 ]

0 голосов
/ 22 сентября 2018

Во-первых, вы должны объявить свой маршрут в файле маршрутизации, в моем случае у меня есть один недавно созданный компонент, поэтому я обновляю свой маршрут следующим образом: 

 {
        path: 'admin',
        canActivate: [AuthGuard],
        loadChildren: './pages/admin/admin.module#AdminModule'
 },

После этого есть два способа навигации,
1) <button [routerLink]="['/admin']" ion-button button-icon icon-start>
2) <button (click)="navigate()" ion-button button-icon icon-start>

и в вашем файле TS добавьте код 

 navigate() {
      this.router.navgateURL(['/admin']);
   }
0 голосов
/ 22 сентября 2018

Попробуйте: 

<button [routerLink]="['/path']" ion-button button-icon icon-start>
...