首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么我的文件app.component.html没有在Angular7中显示路由?

在Angular 7中,如果您的文件app.component.html没有显示路由内容,可能是因为以下几个原因:

  1. 未正确定义路由:首先,确保您已经正确地定义了路由。您可以在app-routing.module.ts文件中定义路由,并将其导入到app.module.ts中。确保路由路径和组件的映射关系正确。
  2. 未使用正确的指令:在app.component.html中,您需要使用router-outlet指令来显示路由的内容。请确保在模板中正确地使用了<router-outlet></router-outlet>
  3. 未正确导入所需的模块:在app.module.ts中,您需要正确导入和声明所需的模块。请确保您已经导入了RouterModule模块,并在imports数组中声明了它。
  4. 未正确配置路由导航:如果您的路由是通过点击链接进行导航的,确保您已经正确地配置了路由链接。您可以使用routerLink指令将链接与路由路径关联起来。

如果您仍然无法解决问题,建议检查浏览器的开发者工具中的控制台输出,以查看是否有任何错误消息。您还可以参考Angular官方文档和示例代码,以获取更多关于路由的信息。

推荐的腾讯云相关产品和产品介绍链接地址:

  • 云服务器(CVM):腾讯云提供的弹性计算服务,适用于各种云原生应用。产品介绍链接
  • 腾讯云数据库(TencentDB):提供多种数据库选择,包括关系型数据库(MySQL、SQL Server、PostgreSQL)和NoSQL数据库(MongoDB、Redis、Cassandra)。产品介绍链接
  • 腾讯云对象存储(COS):高度可扩展、低成本的云存储服务,适用于图片、视频、音频等多媒体处理。产品介绍链接

请注意,以上链接为腾讯云的相关产品介绍,仅供参考。在实际应用中,您可以根据自己的需求选择合适的产品和服务。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有DOM操作日子里,是怎么熬过来

搬好小板凳,接下来,正文从这开始~ 在上篇众多留言中,有位网友评论比较具有代表性,摘出来供大家一阅: “ 同感啊楼主 比如做tab时候,以前jq就是切换一下class,现在vue是切换数据,再根据数据显示...假如你果真碰到这个类似的问题,可以考虑先将项目中node_modules删除掉,然后重新cnpm install安装项目所需依赖。通常这个情况,就会迎刃而解(不要问为什么,这可能是个偏方)。...说到组件,项目中,你可能会看到公司前辈写组件代码,都是以 .vue 为后缀文件,打开后你会发现它整体结构分三层,分别定义了三个 tag标签,template,script,style。...开发时候,写好data 剩下事情就是 通过异步请求来交互data,UI层绑定事件改变data,组件间传递data。 后记 在这个MVVM横行时代,已经渐渐忘却了jQuery存在。...本系列文章还没有结束,下篇,也可能是终结篇,即将来袭!

1.6K110

VMware Workstation 11 Ubuntu 14.04 VMware Tools 问题 :没有显示共享文件

症状:主要表现在Win7用VM11安装Ubuntu14.04,安装完自带VMware Tools之后,/mnt/hgfs 没有前面已经设置好共享文件夹。...国内网站上也很少有关于这类问题说明,查到一篇文章[链接]有说明win8下使用vmware11和ubuntu14.10,也没能解决问题。...具体解决方法是参考一篇英语网文[链接],步骤记录如下: 安装 open-vm-tools 这可能是客户机里实现VMware Tools功能最简单办法。...安装VMware Tools 通过uname -r发现当前内核版本是3.13.0-52,使用vmware tool是版本是9.9.2-2496486。.../untar-and-patch-and-compile.sh 然后……没然后了,/mnt/hgfs/已经出现了希望看到共享文件夹。

1.9K20
  • 【Eclipse】eclipse让Button选择文件显示文本框里

    在给定代码片段,使用了Float.parseFloat(text)方法将文本转换为浮点数。然后,使用逻辑运算符进行条件判断,如果转换后浮点数大于0或小于0,则执行相应操作。...问题:Eclipse如何实现让Button选择文件显示文本框里?回答:Eclipse,可以使用Java Swing库来实现让Button选择文件显示文本框里功能。...首先,需要创建一个JButton对象和一个JTextField对象,并将它们添加到一个JFrame或JPanel。...然后,可以使用JFileChooser类来创建一个文件选择对话框,并将其与按钮关联起来。当用户点击按钮时,可以通过JFileChooser选择文件,并将文件路径显示文本框。...具体实现代码可以参考以下示例: import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import javax.swing.JButton

    16310

    Angular实战之使用NG-ZORRO创建一个企业级后台框架(进阶篇)

    ngOnInit() Angular 第一次显示数据绑定和设置指令/组件输入属性之后,初始化指令/组件。 第一轮 ngOnChanges() 完成之后调用,只调用一次。...修改项目默认调转页面,Angular应用多模块路由配置: 找到app-routing.module.ts文件【routes】对象声明新模块路由,以及项目默认调转页面地址修改。 ?...2、配置首页组件路由(多模块路由完美解决): 首先,我们博客项目存在博客管理和用户管理两个核心模块,我们创建了两个模块,那么我们如何在【app-routing.module.ts】应用路由文件配置多个模块路由...如下所示 前往【my-blog-routing.module.ts】文件配置上新创建首页组件路由。 ? 3、前往根模块【my-blog.module.ts】声明首页组件: ?...自定义页面Layout布局(动态菜单栏配置): 一般情况下我们页面动态菜单都是从后台读取,然后遍历绑定在【app.component.html】页面,我们这里没有展示没有涉及到后台就是用固定式路由

    4K20

    Angular 应用外壳 原

    为什么80%码农都做不了架构师?>>> ? 你首先需要使用 Angular CLI 来创建一个初始化应用。...每个项目都是一组由应用、库或端到端(e2e)测试组成文件集合。 本教程,你将创建一个新工作区。...希望创建一个新工作区并且初始一个应用项目,你需要: 确保你现在没有位于 Angular 工作区文件。...Components(组件)  是 Angular 应用基本构造块。 它们屏幕上显示数据,监听用户输入,并且根据这些输入执行相应动作。...这个插值绑定意思是把组件 title 属性值绑定到 HTML  h1 标记 浏览器自动刷新,并且显示出了新应用标题。 添加应用样式 大多数应用都会努力让整个应用保持一致外观。

    96210

    Angular:构建现代Web应用终极选择

    Angular 特点 完整解决方案: Angular提供了一个完整前端开发框架,包括组件化、依赖注入、模块化、路由管理、模板语法等功能,能够满足复杂Web应用所有需求。...跨平台应用: 对于需要同时Web、移动端和桌面端部署应用,Angular提供了丰富解决方案和工具,能够帮助开发者实现快速、高效跨平台开发。...解读: app.component.html 文件定义了应用结构,包括标题、计数显示和两个按钮,通过 Angular 双向绑定语法 {{ count }} 将 count 变量绑定到页面,并使用...app.component.ts 文件定义了组件行为逻辑,包括 count 变量和两个方法 increment 和 decrement,用于实现计数器增加和减少功能。...通过本文介绍,相信读者对Angular有了更深入了解,能够更好地利用这一终极选择来构建出优秀Web应用。 如果你还没有尝试过Angular,不妨立即开始,探索它带来强大功能和无限可能!

    33910

    教程| Angular 4 中加载功能模块(下)

    将 weather 和 currency 文件夹复制到您主应用程序目录,如下所示。 图 8. 将辅助模块添加到主应用程序目录 ?...应用程序目录中找到文件 app.component.html,将光标放在以下语句下方: 清单 3....幕后过程 继续操作之前,我们看看此加载机制细节。首先在 Chrome 浏览器运行该应用程序。 Windows 机器上,按下 Fn+F12。 Mac 上,按下 Command->alt->i。...练习 3:预加载 除了等待用户调用辅助模块路径,有时预先加载这些模块更高效。在这种情况下,贪婪加载主要模块后,路由器开始预加载标有 loadChildren 属性所有剩余模块。...参见 Angular4PreLoadModules.zip 示例应用程序,更详细地了解预加载。 自定义预加载:大型应用程序,仅预先加载少数惰性加载模块做法是比较合理

    2.3K10

    Angular 2 + 折腾记 :(2)初步认识angular2,不一样开发模式

    ---- 基础概念 国内官网--基础 词汇表(又名计算机术语--angular2 & es6 & es7) 速查表:又名demo写法表,里面涵盖了很多写法,相当于一本小字典 关于ng2一堆为什么:...写起来跟常规基本一样) app.component.css : 根样式文件,配置了scss就是.scss app.component.html : 根html <!.../app.component.html', // 组件关联html页面 styleUrls: ['...., |是管道,支持多个管道,支持内置管道和自定义管道,:跟随是管道参数,后续文档写一个如何自定义管道文章 []="":绑定组件内值[单向,数据流向视图],指令,原生html控件自身属性[value...---- 总结 这一篇没有涉及到路由这些和表单这些; 准备拆成两个文章来说; 路由配置及懒加载这些, 模板驱动表单及响应式表单[嵌套表单响应等],回车键触发搜索等。。

    6.2K20

    你有没有觉得邮件发送人固定配置yml文件是不妥当呢?SpringBoot 动态设置邮件发送人

    明月当天,不知道你有没有思念的人 前言 之前其实已经写过SpringBoot异步发送邮件,但是今天一个小项目中要用到发送邮件时,突然觉得邮件发送人只有一个,并且固定写在yml文件,就是非常不妥当...写之前已经翻过很多博客了,该踩坑都踩差不多了,是实现之后写文章,有问题大家可以一起交流。...小声bb(对于CSDN真的逐渐变得麻木了,简称CV大法现场,虽然本人也是CSDN一名小小博主,也是资深用户,对于文章这块很多时候真的没法说,除了能说加油也没有了吧)。...先说说想要达到什么样效果: 邮件发送人可以是多个,yml文件是兜底配置(即数据库没有一个可用时,使用yml文件配置邮件发送人) 项目启动后,也可以临时增加邮件发送人,或者禁用掉某个邮件发送人...* 最后就是加个兜底,如果数据库查询不到邮件发送人,我们使用配置文件发送邮件配置。 */ if(mails!=null&&!

    1.2K40

    angular使用NG ZORRO来构建博客展示项目(项目结构及路由)

    通过命令很方便创建模块和组件 创建路由 配置根路由,我们这里用loadChildren方式 routes文件夹下创建routes.ts文件并写入如下代码 import {LayoutComponent...}) export class BlogModule { } 路由出口router-outlet 跟路由出口app.component.html文件 博客子模块路由出口layout.component.html文件 <app-footer...效果 源码下载 思考 这章主要写了路由和项目文件管理。 结合angular模块化思想,尽量将不同功能东西分在不同文件,组成不同模块。...如果要以后要扩展blog相关东西,就只需要在BlogModule增加相应组件,然后添加子模块路由即可。

    1.2K30

    【官宣】WijmoJS 2018 v3 正式发布,全面支持Angular7

    WijmoJS使用Web Workers单独线程上导出PDF文件,最大程度保证应用程序正常运行,并支持“后台”导出操作。...轻松创建 Ribbon 主题示例 WijmoJS 添加了一个全新功能区主题示例,显示了如何使用 TabPanel 控件和 WijmoJS 输入模块控件轻松创建Ribbons。...>>点击阅读关于WijmoJS Ribbon 主题示例技术博客 更专业 OLAP 数据切片器 WijmoJS 最新版本 OLAP模块添加了一个Slicer控件。...这项改进使您可以更容易地查看经过PivotGrid过滤和数据透视图控件显示内容。...WijmoJS新版本增加了这个功能,并且还添加了一个悬停时打开菜单选项。 以上就是 WijmoJS 前端开发工具包2018 V3 全部新特性。

    1.7K20

    Angular 应用外壳

    每个项目都是一组由应用、库或端到端(e2e)测试组成文件集合。 本教程,你将创建一个新工作区。...希望创建一个新工作区并且初始一个应用项目,你需要: 确保你现在没有位于 Angular 工作区文件。...Components(组件)  是 Angular 应用基本构造块。 它们屏幕上显示数据,监听用户输入,并且根据这些输入执行相应动作。...title = 'Tour of Heroes'; 打开组件模板文件 app.component.html 并清空 Angular CLI 自动生成默认模板。...这个插值绑定意思是把组件 title 属性值绑定到 HTML  h1 标记 浏览器自动刷新,并且显示出了新应用标题。 添加应用样式 大多数应用都会努力让整个应用保持一致外观。

    1.1K30

    lerna-lite 轻量化 monorepo 管理利器

    写作背景 微前端是一个新旧项结合挺常见一种技术,司也成功借助京东前端团队推出 micro-app 完成了一主两从 3 个独立项目的完美结合。...但随着项目整体 sass 化逐步转型开始,迭代差异化增加就,相对应造成了项目依赖安装、启动、编译等一系列事项频率变高,解决这个拖慢研发节奏问题想到方案就是引入 Monorepo 单仓库管理。...lerna.json 配置文件 npmClient; 使用 yarn 配置:"npmClient": "yarn" 使用 pnpm 配置:"npmClient": "pnpm" 命令列表: 命令...lerna-lite 将会以渐进式方式整个过程逐步引入。.../node_modules" } } PS:一次性删除 packages 每个应用 node_module 文件夹; 安装应用依赖: 添加脚本: { "scripts": { "install

    18610
    领券