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

已成功创建路由器导航链接,但在angular 8中未呈现组件

在Angular 8中,如果已成功创建了路由器导航链接但未呈现组件,可能有以下几个可能的原因和解决方法:

  1. 路由配置错误:首先,确保在路由配置文件(通常是app-routing.module.ts)中正确定义了路由路径和对应的组件。检查路径是否正确,并确保组件的路径和名称与实际文件相匹配。
  2. 模块导入错误:确保在使用该组件的模块中正确导入了该组件。在使用组件的模块文件中,使用import语句将组件导入,并在@NgModule装饰器的declarations或exports数组中声明或导出该组件。
  3. 路由出口未添加:在组件的HTML模板中,确保已添加<router-outlet></router-outlet>标签。这个标签是用来显示路由器加载的组件的位置。
  4. 路由导航错误:如果路由链接是通过点击按钮或链接进行导航的,确保导航事件绑定正确,并且使用了正确的路由路径。

如果以上解决方法都没有解决问题,可以尝试以下进一步的调试步骤:

  1. 检查浏览器控制台:在浏览器的开发者工具中打开控制台选项卡,查看是否有任何错误消息或警告。这些错误消息可能会提供有关为什么组件未呈现的更多信息。
  2. 检查网络请求:在网络选项卡中,检查是否有任何未成功加载的文件。确保组件的HTML模板和CSS样式文件都能够成功加载。
  3. 检查组件代码:仔细检查组件的代码,确保没有任何语法错误或逻辑错误。确保组件的生命周期钩子函数正确执行,并且没有任何可能导致组件未呈现的错误。

总结起来,如果在Angular 8中已成功创建了路由器导航链接但未呈现组件,首先检查路由配置、模块导入、路由出口和路由导航是否正确。如果问题仍然存在,可以通过浏览器控制台和网络请求来进一步调试,并检查组件代码是否有错误。

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

相关·内容

Blazor 中的路由和路由模板

在客户端上,路由器参与多种情况,最常见的情况是用户单击链接、表单上的提交按钮或下拉列表中触发服务器调用的项。路由器绑定到内部位置更改事件,并从客户端处理导航到新请求路径的整个过程。...最后的结果就是,Blazor 路由器目前仅提供作为客户端路由器的基本功能。例如,它不具备检查路由上的授权和创建在位置更改时执行视图转换的链接的功能。...对于具有约束的路由,任何无法成功转换为指定类型的参数值都会使匹配失效,并且无法识别该路由。 更智能的链接和编程 URL 导航 在 Blazor 应用程序中,欢迎你使用定位标记来创建指向外部内容的链接。...但是,当定位标记用于呈现菜单或导航栏时,可能需要一些额外的工作来调整 CSS 样式以反映链接的状态。 内置的 Blazor NavLink 组件可以用于任何需要定位点元素的地方,尤其是在菜单中。...若要通过 Blazor 页面中的代码进行导航,应首先为 IUriHelper 抽象类型注入配置的依赖项。

8.4K21

AngularDart 4.0 高级-路由概述 顶

点击页面上的链接,浏览器导航到新页面。 点击浏览器的后退和前进按钮,浏览器会前后浏览您浏览过的网页的历史记录。 Angular路由器借鉴了这种模式。...它可以将浏览器URL解释为导航到客户端生成视图的指令。它可以将可选参数传递给支持视图组件,以帮助确定要呈现的具体内容。您可以将路由器绑定到页面上的链接,并在用户单击链接导航到适当的应用程序视图。...直到您配置它,路由器才有路由。 以下示例创建一些路由定义。...它演示了同时创建路由器并使用应用于路由器宿主组件的@RouteConfig添加路由的首选方式: lib/app_component.dart (routes) @Component( selector...以下是关键路由术语及其含义: 路由器组成部分 涵义 Router 显示活动URL的应用程序组件。 管理从一个组件到下一个组件导航

6.1K20
  • Angular2 之 路由与导航基础知识路由模块组件路由路由守卫

    导航是很简单的,只是不同页面之间的切换,路由是实现导航的一种。 一个url对应的一个页面,在angular2中是一个组件。定义一个规则。...组件路由 我们需要将一些特征区域分割开来,做成自己单独的模块。必如hero模块。在这里,我们需要hero单独的导航,这也就是组件路由。...在保存成功之前,我们还可以继续推迟导航。如果我们让用户立即移到下一个界面,而保存却失败了(可能因为数据不符合有效性规则),我们就会丢失该错误的上下文环境。...创建自定义策略 我们将需要实现抽象类PreloadingStrategy和preload方法。在异步加载特征模块和决定是否预加载它们时,路由器调用preload方法。...链接参数数组 链接参数数组保存路由导航时所需的成分: 指向目标组件的那个路由的路径(path) 必备路由参数和可选路由参数,它们将进入该路由的URL e.g.我们可以把RouterLink指令绑定到一个数组

    3.3K10

    Angular的12个经典问题,看看你能答对几个?(文末附带Angular测试)

    @angular/core会创建组件,渲染它,创建呈现它的后代。当@angular/core的数据绑定属性更改时,处理就会更改,在从DOM中删除其模板之前,就会销毁掉它。...组件特定hooks: ngAfterContentInit:组件内容初始化完成 ngAfterContentChecked:在Angular检查投影到其视图中的绑定的外部内容之后。...ngAfterViewInit:Angular创建组件的视图后。 ngAfterViewChecked:在Angular检查组件视图的绑定之后。 2. ...Angular 2中的路由工作原理是什么? 路由是能够让用户在视图/组件之间导航的机制。Angular 2简化了路由,并提供了在模块级(延迟加载)下配置和定义的灵活性。 ...在成功匹配时,它会应用重定向,此时路由器会构建ActivatedRoute对象的树,同时包含路由器的当前状态。在重定向之前,路由器将通过运行保护(CanActivate)来检查是否允许新的状态。

    17.3K80

    AngularDart4.0 英雄之旅-教程-07路由 顶

    为了满足这些要求,您将添加Angular路由器到应用程序。 有关路由器的更多信息,请阅读路由和导航页面。  当你完成这个页面,应用程序应该看起来像这个实例(查看源代码)。...如本页“路由链接”部分所述,AppComponent模板中的顶级导航路由器链接设置为目标路由,/dashboard 和/ heroes的固定名称。 这次,您绑定到包含链接参数列表的表达式。...按钮的点击事件绑定到一个gotoDetail()方法,该方法应该通过告诉路由器去哪里命令性地导航。 这种方法需要对组件类进行以下更改: 导入angular_router。...早些时候,你用元素包围了这些链接: router-link-active 类 Angular路由器将router-link-active类添加到其路由与活动路由相匹配的HTML导航元素。...你走过的路 以下是您在此页面中所取得的成果: 您添加了Angular路由器来浏览不同的组件。 您了解了如何创建路由器链接来表示导航菜单项。 您使用路由器链接参数导航到用户选择的英雄的细节。

    17.6K30

    Angular核心-路由和导航

    Angular核心-路由和导航 博客首页:蔚说的博客 欢迎关注点赞收藏⭐️留言 作者水平很有限,如果发现错误,求告知,多谢! 有问题可私信交流!!!...(达内教育学习笔记)仅供学习交流 @[TOC]Angular核心-路由和导航) 多页面应用 :一个项目有多个完整的HTML文件,使用超链接跳转–摧毁一颗DOM树,同步请求另一颗,得到之后再重建新的DOM...==单页面应用的优势:==整个项目中客户端只需要下载一个HTML页面,创建一个完整的DOM树,页面跳转都是一个DIV替换另一个DIV而已—能够实现过场动画 单页面应用不足:不利于SEO优化 Angular...AppRoutingModule, FormsModule, HttpClientModule, RouterModule.forRoot(routes), //导入路由模块,注册路由词典 创建路由组件挂载点...会根据当前的路由器状态动态填充它。

    2.2K20

    Angular 快速学习笔记(1) -- 官方示例要点

    创建组件 ng generate component heroes {{ hero.name }} {{}}语法绑定数据 管道pipe 格式化数据 {{ hero.name | uppercase...创建服务 ng generate service hero import { Injectable } from '@angular/core'; @Injectable({ providedIn...添加路由 ,路由定义 会告诉路由器,当用户点击某个链接或者在浏览器地址栏中输入某个 URL 时,要显示哪个视图,因此路由包含两个属性: i. path:一个用于匹配浏览器地址栏中 URL 的字符串...ii. component:当导航到此路由时,路由器应该创建哪个组件 const routes: Routes = [ { path: 'heroes', component: HeroesComponent...快速学习笔记(4) -- Observable与RxJS Angular快速学习笔记(3) -- 组件与模板 Angular快速学习笔记(2) -- 架构 Angular 快速学习笔记(1) -- 官方示例要点

    3.6K00

    Angular 快速学习笔记(1) -- 官方示例要点

    创建组件 ng generate component heroes {{ hero.name }} {{}}语法绑定数据 管道pipe 格式化数据 {{ hero.name | uppercase...创建服务 ng generate service hero import { Injectable } from '@angular/core'; @Injectable({ providedIn...添加路由 ,路由定义 会告诉路由器,当用户点击某个链接或者在浏览器地址栏中输入某个 URL 时,要显示哪个视图,因此路由包含两个属性: i. path:一个用于匹配浏览器地址栏中 URL 的字符串...ii. component:当导航到此路由时,路由器应该创建哪个组件 const routes: Routes = [ { path: 'heroes', component: HeroesComponent...快速学习笔记(4) -- Observable与RxJS Angular快速学习笔记(3) -- 组件与模板 Angular快速学习笔记(2) -- 架构 Angular 快速学习笔记(1) -- 官方示例要点

    3.7K50

    Angular快速学习笔记(2) -- 架构

    NgModule 为一个组件集声明了编译的上下文环境,它专注于某个应用领域、某个工作流或一组紧密相关的能力。 NgModule 可以将其组件和一组相关代码(如服务)关联起来,形成功能单元。...1.1.2 NgModule 和组件 NgModule 为其中的组件提供了一个编译上下文环境。根模块总会有一个根组件,并在引导期间创建它。...但是,任何模块都能包含任意数量的其它组件,这些组件可以通过路由器加载,也可以通过模板创建。那些属于这个 NgModule 的组件会共享同一个编译上下文环境。 ?...,一旦在模板 HTML 中找到了这个选择器对应的标签,就创建并插入该组件的一个实例。...它的工作模型基于人们熟知的浏览器导航约定: 在地址栏输入 URL,浏览器就会导航到相应的页面 在页面中点击链接,浏览器就会导航到一个新页面 点击浏览器的前进和后退按钮,浏览器就会在你的浏览历史中向前或向后导航

    5.3K20

    AngularDart4.0 指南-体系结构概述 顶

    组件 ? 一个组件控制屏幕中的一小块视图。 例如,以下视图由组件控制: 与导航链接的应用程序根。 英雄名单。 英雄编辑 您可以在一个类中定义一个组件的应用程序逻辑 - 它支持视图的功能。...您可以使用其配套模板定义组件的视图。 模板是一种HTML形式,告诉Angular如何呈现组件。 模板看起来像普通的HTML,除了一些不同之处。...@Component注解需要参数提供Angular需要的信息来创建呈现组件及其视图。..._heroService); 当Angular创建一个组件时,它首先要求一个注入器来提供组件需要的服务。 注入器维护一个先前创建的服务实例的容器。...Router:在客户端应用程序中从一个页面到另一个页面进行导航,而不会离开浏览器 Testing:为您的应用编写组件测试和端到端测试。

    7.9K30

    2021 年 Angular vs. React vs. Vue 前端框架对比

    Angular 框架中,每个组件都有一个类或模板,定义了应用逻辑和 MetaData(装饰器)。组件的这些元数据为创建呈现其视图所需的构件在哪里提供了指引。...React 是基于 JavaScript 的,但在大多数情况下,它与 JSX(JavaScript XML)相结合。...该语法允许开发人员创建 View 组件。 现在 Vue 中的组件是小巧、自成一体和可复用的。...React 最适合以下项目: 对于涉及包含导航项,折叠或展开的手风琴分节,可用或不可用状态,动态输入,可用或不可用按钮,用户登录,用户访问权限等的许多组件的应用程序。...文章开头的 本文永久链接 即为本文在 GitHub 上的 MarkDown 链接。 ---- 掘金翻译计划 是一个翻译优质互联网技术文章的社区,文章来源为 掘金 上的英文分享文章。

    2.2K10

    Angular性能优化实践——巧用第三方组件和懒加载技术

    应该有很多人都抱怨过 Angular 应用的性能问题。其实,在搭建Angular项目时,通过使用打包、懒加载、变化检测策略和缓存技术,再辅助第三方组件,便可有效提升项目性能。...环境准备 全局安装Angular CLI:npm install -g @angular/cli 使用Angular CLI创建一个新项目:ng new spread-sheets-angular-cli...中配置SpreadJS CS 在Angular应用程序中使用 SpreadJS 使用Angular CLI构建和运行项目 完成上述环境搭建,便可将表格编辑器组件集成到 Angular 项目中,实现在线导入导出...在懒加载模块的路由模块中,添加一个指向该组件的路由。本次的demo存在两个懒加载的模块。 ? ? 2. 建立导航UI 虽然可以直接在地址栏直接输入URL,但是有导航UI会更好用。...这会让Angular知道AppRoutingModule是一个路由模块,而 forRoot() 表示这是根路由模块。它会配置传入的所有路由、让你能访问路由器指令并注册 Router。

    4.1K20

    AngularDart 4.0 高级-生命周期钩子 顶

    组件有一个由Angular自己管理的生命周期。 Angular创建它,渲染它,创建和渲染它的子项,在数据绑定属性发生变化时对其进行检查,并在将它从DOM中删除之前对其进行销毁。...组件生命周期挂钩 指令和组件实例的生命周期与Angular创建,更新和摧毁它们一样。...其他生命周期挂钩 其他Angular子系统除了这些组件钩子可能有自己的生命周期钩子。 例如,路由器也有自己的路由器生命周期挂钩,可以让我们利用路由导航中的特定时刻。...生命周期练习 通过组件的一系列练习在根AppComponent的控制下呈现来演示生命周期挂钩。 它们遵循一种常见的模式:父组件作为一个子组件的一个或多个生命周期钩子方法的测试装备。...这个钩子迭代更改的属性并记录它们。 示例组件OnChangesComponent具有两个输入属性:hero和power。

    6.2K10

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

    请注意,本教程适用于熟悉使用 Angular 进行基本 Web 应用程序开发的开发人员。 Angular 中的功能模块 单页 Web 应用程序在启动时仅呈现一个 HTML 页面。...一个 Angular 应用程序由以下部分组成: 模块 组件 模板 元数据 数据绑定 指令 服务 依赖注入 每个 Angular 应用程序都至少有一个模块,称为根模块。...您可以引导根模块来启动 Angular 应用程序。对于小型应用程序,只需要根模块和一些组件。在构建更复杂的中到大型应用程序时,会向应用程序添加功能模块。...关于示例应用程序 本教程将介绍使用 Angular 4 创建一个中型 Web 应用程序的过程。...用户单击 Markets 链接时,应用程序会调用 /markets 路径。用户单击 Sports 链接时,应用程序会调用 /sports 路径。 图 5.

    2.2K10

    Angular 从入坑到挖坑 - 路由守卫连连看

    对应官方文档地址: 路由与导航 配套代码地址:angular-practice/src/router-combat 二、Contents Angular 从入坑到弃坑 - Angular 使用入门 Angular...从入坑到挖坑 - 组件食用指南 Angular 从入坑到挖坑 - 表单控件概览 Angular 从入坑到挖坑 - HTTP 请求概览 Angular 从入坑到挖坑 - Router 路由使用入门指北...在跳转到组件前获取某些必须的数据 离开页面时,提示用户是否保存提交的修改 Angular 路由模块提供了如下的几个接口用来帮助我们解决上面的问题 CanActivate:用来处理系统跳转到到某个路由地址的操作...UrlTree:取消当前的导航,并导航到路由守卫返回的这个 UrlTree 上(一个新的路由信息) 4.2.1、CanActivate:认证授权 在实现路由守卫之前,可以通过 Angular CLI...Angular CLI 创建一个危机中心模块(crisis 模块) -- 查看创建模块的相关参数 ng g module --help -- 创建危机中心模块(自动在 app.moudule.ts

    3.8K30

    .NET 8 Release Candidate 1 (RC1)现已发布,包括许多针对ASP.NET Core的重要改进!

    您现在可以根据请求静态地从服务器呈现Blazor组件,逐渐增强体验,增强导航和表单处理,流式服务器呈现更新,并根据需要添加丰富的交互性,使用Blazor Server或Blazor WebAssembly...组件名称和内容进行了清理,以匹配其功能: Index.razor -> Home.razor Counter.razor更改 FetchData.razor -> Weather.razor 组件现在更加简洁和简单...我们将Blazor路由器移动到了新的组件,并移除了其参数,因为它从未被使用过。Routes 我们将默认的Blazor错误UI移到了组件中。...根组件需要是静态的,因为它呈现Blazor脚本,脚本标记不能动态删除。您还不能直接从组件使Blazor路由器具有交互性,因为它具有渲染片段参数,这些参数不可序列化。...Blazor Web App模板创建多个计数器组件 Blazor Web App在启用交互式WebAssembly组件时采用了不必要的解决方案。模板生成了两个组件:1.

    32940

    8分钟为你详解React、Angular、Vue三大框架

    'true' : 'false' } 呈现为字符串 'true'。 ? 结果会是: ? 函数和JSX可以用于条件表达式中: ? 结果会是: ?...常用命令 从终端上,全局安装Angular CLI: npm install -g @angular/cli 使用 ng new 命令创建一个新的 Angular CLI 工作区: ng new my-project-name...Vue提供了一个界面,可以根据当前的URL路径来改变页面上显示的内容 – 可以有多种方式(无论是通过电子邮件链接、刷新还是页面内链接)。...此外,当某些浏览器事件发生在按钮或链接上时,使用前端路由器可以有意识地转换浏览器路径。 Vue本身并没有自带前端路由。...这将在(const User...)中定义的User组件呈现。 允许用户组件使用route对象的params键输入用户的特定ID:route.params.id。

    22.1K20

    【译】.NET Core 3.0 Preview 3中关于ASP.NET Core的更新内容

    运行时编译 Worker服务模板 gRPC模板 Angular模板更新为Angular 7 SPA认证 SignalR与Endpoint路由集成 SignalR Java客户端支持长轮询 其他详细信息和已知问题...,并指定根组件App应该在匹配选择器App的DOM元素中呈现。...编译器处理将委托转换为EventCallback的过程,并将执行其他一些操作,以确保呈现过程具有足够的信息来呈现正确的目标组件。...注意:在本文中,我们展示了对Angular的身份验证支持,但在React模板中提供了相同的功能。...创建新的Angular应用程序 要创建一一个新的支持身份验证的Angular应用程序,我们需要调用以下命令: 1: dotnet new angular -au Individual 这个命令创建一个新的

    22.7K10
    领券