我正在嘗試學習角度路由。我可以看到白屏并且沒有錯誤。我想從應用程式路由到主頁。
這是代碼。
對于應用程式：
app-routing.module.ts
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{
path:'',
loadChildren: () => import('./pages/home/home.module').then(m => m.HomeModule)
}
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule {}
應用程式組件.html
<ion-app>
<ion-router-outlet></ion-router-outlet>
</ion-app>
app.component.scss
//Empty
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss'],
})
export class AppComponent {
constructor() {
}
}
對于主頁：
home-routing.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomePage } from './home.page';
const routes: Routes = [
{
path:' ',
component:HomePage
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class HomePageRoutingModule {}
home.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomePageRoutingModule } from './home-routing.module';
import { HomePage } from './home.page';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
CommonModule,
IonicModule,
HomePageRoutingModule,
FormsModule
],
declarations: [HomePage],
})
export class HomeModule { }
主頁.html
<p> Home Page Works!<p>
主頁.scss
//Empty
主頁.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss'],
})
export class AppComponent {
constructor() {
}
}
運行后，我在控制臺中沒有看到任何錯誤。瀏覽器是一個白色的空白螢屏。它應該顯示“主頁作品”。
我正在使用 Ionic 6 和 Angular 版本。我也在用電容。那么，你能告訴我為什么它不運行嗎？我撓了幾個小時的頭。謝謝
uj5u.com熱心網友回復：
我可以在您的 home-routing.ts 檔案中看到一個錯誤。路徑變數中的路徑屬性為 HomePage 組件包含兩個額外的空格，而在 app-routing 模塊中則不同。您需要洗掉這兩個額外的空格。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/392322.html
上一篇：不能在陣列中NgFor