我已經安裝了 AngularCLI 并且一直在使用 VS Code 來創建我的網路應用程式。到目前為止，我只創建了用于創建各個視圖的檔案夾。但是，盡管我的代碼中沒有錯誤，但我遇到了路由問題。當我運行我的應用程式時，我會看到帶有一些按鈕的基本主螢屏，當我單擊這些按鈕時，我可以看到地址欄發生了變化，但視圖沒有變化。它似乎只顯示了我第一次創建專案時創建的初始 app.component.html 檔案。任何建議或幫助將不勝感激！提前致謝
這是代碼：
app.component.html:
<p> Hello, World!</p>
<h1> TITLE TITLE </h1>
<nav >
<div >
<a routerLink="/">Home</a>
<a routerLink="/login">Login</a>
<a routerLink="/register">Register</a>
</div>
</nav>
<!-- main content container -->
<div >
<div >
<div >
<div >
<router-outlet></router-outlet>
</div>
</div>
</div>
</div>
app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginPageComponent } from './login-page/login-page.component';
import { RegisterPageComponent } from './register-page/register-page.component';
import { HomePageComponent } from './home-page/home-page.component';
import { HeaderComponent } from './header/header.component';
@NgModule({
declarations: [
AppComponent,
LoginPageComponent,
RegisterPageComponent,
HomePageComponent,
HeaderComponent,
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.routing.ts: (I created this file for routing myself)
import { Routes, RouterModule } from '@angular/router' ;
import { HomePageComponent } from './home-page/home-page.component';
import { RegisterPageComponent } from './register-page/register-page.component';
import { LoginPageComponent } from './login-page/login-page.component';
const routes: Routes = [
{ path: 'login', component: LoginPageComponent},
{ path: 'register', component: RegisterPageComponent},
{ path: 'home', component: HomePageComponent},
{ path: '**', redirectTo: ''}
];
export const appRoutingModule = RouterModule.forRoot(routes);
app-routing.module.ts: (this one was created when the project was first generated)
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{ path: 'login' , }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
uj5u.com熱心網友回復：
您正在匯入app-routing.module.ts，app.module.ts但唯一定義的路由是登錄，它沒有要呈現的相應組件。
{ path: 'login' , }
我建議將您的路線定義從洗掉app.routing.ts到app-routing.module.ts洗掉app.routing.ts。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/421054.html
標籤：