angular - 路由在角度应用程序中无法正常工作
问题描述
我正在尝试向我的角度应用程序添加路由,但路由组件未在路由器出口位置显示 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>
索引.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 出现了。
解决方案
推荐阅读
- group-by - 插入记录时通过选择组合框获取 max(id)+1
- multi-tenant - Quicksight 能否支持使用具有相同数据集和仪表板的不同数据库的多租户?
- javascript - 在firebase中获取集合及其子集合
- java - Android SDK 26 及更高版本中的通知是否支持低于 26 的 SDK?
- python - 如何将文件夹中所有图像的数据转换为csv文件?
- javascript - Fabric js代码不适用于最新版本
- django-rest-framework - 从后端 API 获取数据的 Expo 在模拟器上工作,但在实际设备上不工作
- rust - 如何解析 URL 查询字符串并从中创建用户指定的结构?
- tensorflow - 禁用急切执行模式的训练对象检测模型。(如何获取张量的值)
- chef-infra - 来自 Git 存储库源的 Chef Cookbook 依赖项