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

Question

我正在使用我最近购买的模板来构建我的 ionic + angular 应用程序。我的问题是我是 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);
        }
    }
}

Answer 1

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

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

Answer 2

试试：

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