在 Angular 应用程序中从一页路由到另一页

Question

我试图让一个基本的例子工作，但不能。 我创建了一个新的 Angular 应用程序并使用 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不起作用。 还有什么我应该在某处添加的吗？

应用程序路由模块

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 {}

二维码.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