Question

我正在尝试向我的角度应用程序添加路由，但路由组件在路由器出口处未显示html：

app.component.html：

  <ul>
    <li><a routerLink="/login">HOME</a></li>
    <li><a routerLink="/plan">PLAN</a></li>
    <li><a routerLink="/login">HISTORY</a></li>
    <li style="float:right"><a routerLink="/login">LOGIN</a></li>
  </ul>
  <router-outlet></router-outlet>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { RouterModule, Routes } from '@angular/router';
import { PlanComponent } from './plan/plan.component';

const appRoutes: Routes = [
    {path: 'login', component: LoginComponent},
    {path: 'plan', component: PlanComponent},
    {path: '', component: LoginComponent}
];

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    PlanComponent
  ],
  imports: [
    RouterModule.forRoot(
      appRoutes, 
      {enableTracing: true}
    ),
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

plan.component.html

<p>plan works!</p>

login.component.html

<p>login works!</p>

index.html

<!doctype html>
<html lang="en">
<head>
  <base href="/">
  <meta charset="utf-8">
  <title>SnearkyCalories</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

我看到的问题是导航栏覆盖了插座标签。当我在列表代码下添加一些文本时，应该在路由器出口显示的html出现了。

路由在角度应用程序中无法正常工作

0 个答案: