我正在使用我最近购买的模板来构建离子+角度应用程序。我的问题是我不熟悉Angle,并且在单击按钮时尝试重定向用户。我一直在研究,发现它可以检测到点击但不会重定向。我尝试导入“路由器”和其他故障排除步骤,但对我来说不起作用。这是我的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);
}
}
}
答案 0 :(得分:3)
首先,在我的情况下,您必须在路由文件中声明您的路由,因为我有一个新创建的组件,因此我按照以下方式更新路由
{
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']);
}
答案 1 :(得分:1)
尝试:
<button [routerLink]="['/path']" ion-button button-icon icon-start>