使用 angular 重定向到另一个页面 6

Question

我正在使用我最近购买的模板来构建我的 ionic + angular 应用程序。我的问题是我是 angular 的新手，我试图在单击按钮时重定向用户。我一直在研究，我发现它检测到点击但不重定向。我尝试导入 "router" 和其他故障排除步骤，但它对我不起作用。这是我的 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);
        }
    }
}

Answer 1

尝试：

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

Answer 2

首先你必须在你的路由文件中声明你的路由在我的例子中我有一个新创建的组件所以我更新我的路由如下

 {
        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']);
   }

使用 angular 重定向到另一个页面 6

Redirect to another page using angular 6

html

angular

ionic-framework

angular-ui-router