从一个页面到另一个页面的路由

Question

我试图得到一个基本的例子，但不能工作。我已经创建了一个新的角度应用程序，并使用CLI生成一个新的页面称为qr-code。然后，我在主页上添加了一个名为qr-code的按钮，我想链接到qr-code页面。守则是：

<ion-button>
    <ion-icon name="qr-code-outline" routerLink='/qr-code'></ion-icon>
    <ion-label>Link to QR Code</ion-label>
</ion-button>

按钮是可点击的，但routerLink不工作。还有什么我该加的吗？

app-routing.module

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [

  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'qr-code',
    loadChildren: () => import('./qr-code/qr-code.module').then( m => m.QrCodePageModule)
  },
  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

qr-code-app-routing.module

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { QrCodePage } from './qr-code.page';

const routes: Routes = [
  {
    path: '',
    component: QrCodePage
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class QrCodePageRoutingModule {}

qr-code.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { QrCodePageRoutingModule } from './qr-code-routing.module';

import { QrCodePage } from './qr-code.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    QrCodePageRoutingModule
  ],
  declarations: [QrCodePage]
})
export class QrCodePageModule {}

Answer 1

试试这个：

<ion-button routerLink='/qr-code'>
<ion-icon name="qr-code-outline"></ion-icon>
<ion-label>Link to QR Code</ion-label>
</ion-button>

我认为您的routerLink应该放在ion-button属性上，而不是ion-icon上。