最简单的Angular Route hello world场景都跑不通的一个原因

简介: 最简单的Angular Route hello world场景都跑不通的一个原因

我有一个最简单的app Component:

@Component({
  selector: "app-root",
  template: `
  <div cxFocuses>Painful</div>
  <a href="/custom2">Click me</a>
  `
})
export class AppComponent {
}

我期望点击了Click Me这个标签之后,能跳转到相对路径/custom2.

在app.module.js里,定义一个route数组:

const CUSTOM_ROUTES: Routes = [
  { path: "custom2", component: RouteDemoComponent }
];

Routes是一个type alias,相当于Route[]:


image.png


而Route是一个interface:

image.png


https://angular.io/api/router/Route#description

image.png


我将RouterModule.forRoot返回的Module放到app.module.ts的imports区域之后:


image.png


浏览器访问localhost:4200/custom2, 发现没有跳转到期望的Component里去。


经过检查,发现是因为我的application template里,缺少了router-outlet标签的定义:


image.png


加上之后,问题解决:

image.png


image.png

相关文章
|
12月前
Angular 应用里 NullInjectorError - No provider for XX 错误的一个场景和分析过程
Angular 应用里 NullInjectorError - No provider for XX 错误的一个场景和分析过程
|
JavaScript UED
Angular 服务器端渲染场景里,服务器端和客户端渲染出的 HTML 源代码有可能不完全一致
Angular 服务器端渲染场景里,服务器端和客户端渲染出的 HTML 源代码有可能不完全一致
|
JavaScript 前端开发
Angular platform-server.js 里动态创建 JavaScript 标签页的场景
Angular platform-server.js 里动态创建 JavaScript 标签页的场景
Angular platform-server.js 里动态创建 JavaScript 标签页的场景
Angular Route数据结构里常用字段使用方法一览
Angular Route数据结构里常用字段使用方法一览
Angular Route数据结构里常用字段使用方法一览
|
JavaScript 容器
Angular应用input和div标签页的动态创建场景
Angular应用input和div标签页的动态创建场景
207 0
Angular应用input和div标签页的动态创建场景
Angular应用动态创建style标签页的场景
Angular应用动态创建style标签页的场景
145 0
Angular应用动态创建style标签页的场景
在Angular的index.html里插入script,拦截所有动态创建标签页的场景
在Angular的index.html里插入script,拦截所有动态创建标签页的场景
119 0
在Angular的index.html里插入script,拦截所有动态创建标签页的场景
Angular应用动态创建style标签页的场景
Angular应用动态创建style标签页的场景
134 0
Angular应用动态创建style标签页的场景
|
21天前
|
缓存 JavaScript 前端开发
Angular 应用打包和部署
Angular 应用打包和部署
55 1
|
2月前
|
应用服务中间件 Java Maven
掌控视图的力量!深入解析 JSF 视图管理,揭秘视图生命周期的秘密,让你的应用更高效!
【8月更文挑战第31天】JavaServer Faces (JSF) 是一种强大的框架,用于管理 Web 应用程序的视图。本文通过具体案例介绍 JSF 视图管理的基础知识,包括创建、管理和销毁视图的过程。首先,在 Eclipse 中创建一个新 JSF 项目,并配置 Maven 依赖。接着,在 `WEB-INF` 目录下配置 `web.xml` 文件,设置 JSF servlet。
37 0
下一篇
无影云桌面