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

单击按钮时Router.navigate未重定向- Angular 9

在Angular 9中,当单击按钮时,Router.navigate未重定向可能是由于以下几个原因引起的:

  1. 路由配置问题:检查路由配置是否正确。确保目标路径在路由配置中正确定义,并且与按钮点击事件中使用的路径一致。
  2. 路由导航守卫:如果你在路由配置中使用了导航守卫,那么确保守卫逻辑正确。导航守卫可以用于控制路由的访问权限,如果守卫返回false,路由将不会被重定向。
  3. 路由参数问题:如果你的目标路径包含参数,确保在导航时将参数传递给Router.navigate方法。例如:Router.navigate(['/path', {param: value}])。
  4. 异步操作问题:如果你的重定向逻辑涉及到异步操作,例如从服务器获取数据后再进行路由导航,确保异步操作完成后再执行路由导航。

解决上述问题后,如果Router.navigate仍然未重定向,可以尝试以下步骤:

  1. 检查浏览器控制台:查看浏览器控制台是否有任何错误消息。可能会有相关的错误提示,帮助你找到问题所在。
  2. 使用Angular路由器调试工具:Angular提供了一个路由器调试工具,可以帮助你分析路由器的行为。你可以在浏览器控制台中输入ng.router,然后调用ng.router.console来访问该工具。
  3. 检查路由器模块的导入和配置:确保你的路由器模块正确导入并且在应用的主模块中进行了正确的配置。
  4. 检查按钮点击事件:确保按钮的点击事件绑定正确,并且在事件处理程序中调用了Router.navigate方法。

综上所述,以上是当单击按钮时Router.navigate未重定向的一些可能原因和解决方法。希望能帮助到你解决问题。关于Angular 9和路由器的更多信息,你可以参考腾讯云的Angular文档和Angular路由器官方文档。

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

相关·内容

AngularDart 4.0 高级-路由概述 顶

当用户执行应用程序任务Angular路由器支持从一个视图导航到下一个视图。 本指南涵盖路由器的主要功能,通过演示可以实时运行的小应用程序(查看源代码)演示它们。...您可以将路由器绑定到页面上的链接,并在用户单击链接导航到适当的应用程序视图。当用户点击按钮,从下拉框中选择,或者响应来自任何来源的其他刺激,您都可以进行命令式导航。...您可以将该列表绑定到RouterLink或将该列表作为参数传递给Router.navigate方法。...与英雄细节不同,当您键入更新,危机细节更改是暂时的,直到您通过按下“Save”或“Cancel”按钮保存或放弃它们。 这两个按钮都回到危机中心及其危机列表。 不要单击任一按钮。...点击浏览器后退按钮或“英雄”链接。 向上弹出一个对话框。 ? 您可以选择“OK”并丢失您的更改,或单击“Cancel”并继续编辑。 这种行为的后面是路由的routerCanDeactivate挂钩。

6.1K20

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

添加路由 应该在用户点击按钮后显示英雄而不是自动显示。 换句话说,用户应该能够导航到英雄列表。 更新pubspec 使用Angular路由(angular_router)启用导航。...要在其他地方导航,用户可以单击AppComponent中的两个链接之一,或单击浏览器的后退按钮。...当用户从列表中选择一个英雄,他们不会进入详细页面。 相反,他们会在此页面上看到一个迷你细节,并且必须单击一个按钮才能导航到完整的详细信息页面。...查看详细信息按钮不起作用。 更新HeroesComponent类 响应按钮单击,HeroesComponent导航到HeroesDetailComponent。...按钮的点击事件绑定到一个gotoDetail()方法,该方法应该通过告诉路由器去哪里命令性地导航。 这种方法需要对组件类进行以下更改: 导入angular_router。

17.5K30
  • AngularDart4.0 英雄之旅-教程-08HTTP 顶

    更改的getHeroes API 尽管您对getHeroes()和getHero()做了重大的内部更改,但公共签名没有更改。 你仍然从这两种方法返回一个未来。 您不必更新任何调用它们的组件。...但是,如果您单击后退按钮,更改将丢失。 更新之前没有丢失。 什么改变了? 当应用程序使用模拟英雄列表,更新直接应用于单个应用程序范围的共享列表中的英雄对象。...刷新浏览器,更改英雄名称,保存更改,然后单击浏览器“后退”按钮。 现在应该继续进行更改。 添加加入英雄的能力 要添加英雄,应用程序需要英雄的名字。 您可以使用与添加按钮配对的输入元素。...添加删除英雄的能力 英雄视图中的每个英雄都应该有一个删除按钮。 将以下按钮元素添加到英雄组件HTML中,位于重复的元素中的英雄名称之后。...delete" (click)="delete(hero); $event.stopPropagation()">x 除了调用组件的delete()方法之外,删除按钮单击处理程序代码会停止单击事件的传播

    11K30

    IntelliJ IDEA 2022.2.2汉化版免登陆账号「winmac」

    UI元素(如按钮,单选按钮,复选框,文本字段,选择控件,微调器和选项卡)的外观已更新。4、版本控制- 更容易解决合并冲突使用Git,现在查找包含合并冲突的文件要容易得多。...单击“ 解决操作”链接以打开“ 与冲突合并的文件”对话框。此外,当您执行pull,merge或rebase,IntelliJ IDEA现在会在“ 与冲突合并的文件”对话框中显示Git分支名称。...6、组态- 项目配置在IntelliJ IDEA 中,您可以在添加新存储库排除某些传递依赖项。单击库属性编辑器中的新配置操作链接。...- 查找使用的代码您现在可以使用新的代码覆盖功能在客户端找到使用的JavaScript代码(或TypeScript代码)。...您可以通过从过程的上下文菜单中选择“ 执行”操作来运行过程,也可以在打开源代码单击工具栏中的“运行”按钮来运行过程。

    4.7K30

    如何使用WijmoJS 纯前端设计器,快速生成 Angular 应用

    在搜索框中键入wijmo,然后单击“安装”按钮开始下载扩展。 出现时单击“重新加载”按钮以完成安装。...但是,如果单击设计器左侧的“源视图”按钮,您将看到扩展程序已经发生更改。 要返回到设计图面,请单击WijmoJS 徽标下方的“设计视图”按钮。...在“属性”窗格中找到columns属性,然后单击属性编辑器右侧的“显示项目”按钮以显示Angular标记中定义的八个列。 将鼠标悬停在单词“author”上,然后单击出现的链接。...要返回FlexGrid表格控件的设置,请单击“属性”窗格中的“后退”按钮。 如果对设计器中所做的更改感到满意,请单击WijmoJS 徽标下方的“保存”按钮以更新原始源文件的编辑器并将其重点关注。...要返回可视化设计器,请单击WijmoJS 徽标下方的“设计视图”按钮

    5.4K40

    Angular v18 现已推出!

    '); handleClick() { this.name.set('Zoneless Angular'); }}在上面的示例中,单击按钮将调用该方法,该方法将更新信号值并更新 UI。...handleClick例如,当用户单击上面的按钮,由于调度程序的合并,Angular 将仅运行一次更改检测。在我们的文档中了解更多信息。...Angular.dev 主页现在,所有对 angular.io 的请求都会自动重定向angular.dev。为确保所有现有链接继续有效,我们将开发人员转发给 v17.angular.io。...在客户端上,Angular 将下载关联的 JavaScript,并仅在满足模板中指定的触发条件对延迟块进行水合。...此更改将加快您的 Angular CLI 安装时间。路由重定向作为函数为了在处理重定向实现更高的灵活性,在 Angular v18 中,redirectTo 现在接受返回字符串的函数。

    19210

    Angular 英雄示例教程

    你将学到足够的 Angular 知识和足够的信心来让 Angular 提供你所需的支持。...如果你在主面板中单击英雄名称 "Magneta" ,路由将会打开 "Hero Details(英雄详细)"页面。在这个页面中,你可以对英雄的名字进行修改。...单击 "Back(返回按钮)",应用将会让你返回到 Dashboard(主面板)页面中。顶部的链接能够让你在任何时候都能够返回到主页面。...如果你单击  "Heroes(英雄列表)",引用将会将英雄以列表显示。 当你单击不同英雄的名字的时候,一个只读的“微型详情视图”会在列表的下方显示,以体现你的选择。...你可以点击 “View Details(查看详情)” 按钮进入所选英雄的编辑视图。 下面这张图汇总了所有可能的导航选项。

    1.5K30

    如何使用 GitHub Actions 构建 Docker 镜像

    CLI RUN npm install -g @angular/cli@8 创建GitHub Action 因此,要开始使用GitHub操作,请在GitHub中的repo页面上单击Actions选项卡...要找到secrets,请单击存储库顶部的设置,然后单击左侧导航列表中的Secrets,然后添加您需要的secrets,在本例中是我们的Docker Hub用户名和密码: 标签和发布 最后一步是在我们的GitHub...要做到这一点,点击代码标签下的releases部分: 点击“Draft a new release”按钮。GitHub将引导您完成创建发布的步骤,但您应该选择标记名称和所需的发布提交。...记住两件事:您在这里使用的标签名称将用作Docker镜像的标签名称,一旦您单击“发布版本”按钮,工作流将启动。一旦你准备好了,发布新版本!...查看工作流输出 要查看工作流中发生的情况,并在需要进行调试,请返回到存储库中的Actions选项卡。

    61810

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

    请注意,本教程适用于熟悉使用 Angular 进行基本 Web 应用程序开发的开发人员。 Angular 中的功能模块 单页 Web 应用程序在启动仅呈现一个 HTML 页面。...对于示例应用程序,将结合使用 3 种常见的加载技术来实现一种混合加载策略: 贪婪加载:在贪婪加载场景中,所有模块和功能都在应用程序启动加载。...如果单击 Home 图标,将会看到 Markets 的功能区域: 图 2. Markets 的用户界面 如果单击 Sports,将会看到 Sports 的功能区域: 图 3....用户单击 Markets 链接,应用程序会调用 /markets 路径。用户单击 Sports 链接,应用程序会调用 /sports 路径。 图 5....如果未指定路径,数组中的第一项会重定向到 /markets 路径。 要确认目前实现的应用程序功能,可在浏览器中返回到 http://localhost:4200。

    2.2K10

    Ionic!用Web技术开发移动应用!

    Angular—用来控制应用路由和功能的Web 应用。Angular Web 应用运行在WebView 中。Angular 是一个流行的Web 应用构建框架,主要管理Web 应用的逻辑和数据。...Ionic 基于Angular 构建,主要用来设计用户界面和用户体验。Ionic 包含一些视觉元素,比如选项卡、按钮、导航头部。...你在移动设备上访问网站的时候可能会被重定向到另一个功能有限的版本。比如访问eBay,你会被重定向到http://m.ebay.com 子域名。...„需要使用键盘—用户必须在浏览器中输入地址来寻找或者使用移动端网站,这比单击一个图标困难多了。 „受限的用户界面—很难创建对触摸友好的应用,尤其是当要同时兼容桌面版。...当需要使用原生API ,Hybrid 应用框架会把API 桥接到JavaScript 中。你的应用可以像检测单击和键盘事件一样检测扫动和捏合手势。不过,如你所料,Hybrid 应用也有一些缺点。

    4K20

    AngularDart4.0 英雄之旅-教程-01介绍

    你会学到Angular的核心来开始,并获得信心,Angular可以做任何你需要做的事情。 您将在介绍性层面介绍很多方面,您会发现许多链接到更深入的页面。...你可以单击面板上边的两个链接在“Dashboard”和“Heroes”间切换。 当你单击面板上的英雄“Magneta”,路由将打开英雄“Magneta”的视图,并且你可以修改名字。 ?...点击"Back"将返回到面板,顶部的链接带你进入不同的主视图,单击“Heroes”,应用将显示“Heroes”主列表视图。 ? 当您单击不同的英雄名称,列表下面的只读迷你细节反映了新的选择。...您可以单击“查看详细信息”按钮,获取所选英雄的可编辑详细信息。 下图捕获所有导航选项。 ? 应用动图 ? 接下来 您将一步一步地构建“英雄之旅”应用程序。...一切都是有根据的,一路上,您将会熟悉Angular的许多核心基础知识。

    1.3K20

    如何使用纯前端控件集 WijmoJS 中的可视化在线设计器

    提供了一个可视界面,用于创建和编辑表示WijmoJS 纯前端控件的Angular标记。...开始使用WijmoJS Designer 设计器可视化界面首次打开,该设计图面默认自带一个带有实时样本数据的纯前端FlexGrid表格控件,要删除它,请单击“编辑”工具栏上的“删除”按钮。...要返回可视化设计器,请单击页面左侧的“设计视图”按钮(“保存”按钮下方)。...单击“属性”窗格中的“后退”按钮以返回FlexChart的设置。 接下来,单击图例属性的齿轮图标,并将其位置设置更改为“底部”。 像以前一样单击后退按钮返回FlexChart设置。...在“属性”窗格中向下滚动,找到系列属性,然后单击“显示项目”按钮将其展开。 将鼠标悬停在最新价格上,然后单击出现的链接。

    5.9K20

    如何在Ubuntu 16.04上使用Alerta监视Zabbix警报

    然后从下拉列表中选择读写,并单击“ 创建新API密钥”按钮。将创建新密钥,您将看到其详细信息。复制此密钥; 你以后会需要的。...在主菜单中,单击“ 管理”,选择“ 介质类型”,然后单击右上角的“ 创建介质类型”按钮。 填写表格并提供以下详细信息: · 对于姓名,请输入Alerta。...单击“ 添加”按钮以创建新的媒体类型。 然后为您的用户帐户添加新媒体。在主菜单中选择“ 管理 ”,然后选择“ 用户”。单击您的用户名,然后选择“ 媒体”选项卡。...单击“ 添加”按钮保存新媒体类型。 然后验证用户的配置并单击“ 更新”按钮保存设置。 现在配置一个动作来发送消息。在主菜单中选择Configuration,然后选择Actions。...单击“ 创建操作”按钮。 在“ 操作”选项卡上,将“ 名称”字段的值设置为Forward to Alerta。

    4.1K40

    从0开始构建一个Oauth2Server服务 单页应用

    如果用户单击“批准”,服务器将重定向回网站,并提供授权代码和URL 查询字符串中的状态值。 授权授予参数 以下参数用于发出授权请求。...由于使用秘密,因此除了使用已注册的重定向 URL 之外,无法验证客户端的身份。这就是为什么您需要使用 OAuth 2.0 服务预先注册您的重定向 URL。...也几乎不需要刷新令牌,因为 JavaScript 应用程序只会在用户积极使用浏览器时运行,因此它们可以在需要重定向到授权服务器以获取新的访问令牌。...具体来说,刷新令牌必须仅对一次使用有效,并且授权服务器必须在每次发布新的访问令牌以响应刷新令牌授予发布一个新的刷新令牌。...这是一种相对常见的架构模式,其中应用程序由动态后端(如 .NET 或 Java 应用程序)提供服务,但它使用单页应用程序框架(如 React 或 Angular)作为其 UI。

    19930

    Vue路由详解(路由基础,路由轮播,路由传参,通配符路由)

    Vue路由基础知识点: 1.router-view: 类似angular里的插座,用于承载路由的切换组件 2.router-link: 类似angular里的routerLink,区别是:vue的router-link...是一个组件,直接充当a标签使用.但是在最后渲染,vue还是会将其渲染成a标签 3.routes: 数组,用来做路由信息的配置 4.router: 对象,通过该对象的方法实现路由的跳转,例如按钮点击实现跳转...:'/home'}, ] 二级路由重定向 二级路由的注意点: 子路由里的path基于mine的,不要加 / ,加了 / 就是基于跟路由的 a....//子路由里的path基于mine的,不要加 / ,加了 / 就是基于跟路由的 //二级路由的重定向 {path:'',redirect: {path:'account...hideOnClick: true, //点击slide显示/隐藏按钮 disabledClass: 'my-button-disabled', //前进后退按钮不可用时的类名。

    3.1K21

    利用Instagram进行网络钓鱼的目的竟然是为了备份码

    但是,目标用户一旦点击了该按钮,他们就会被重定向到一个虚假的Meta网站。...“跳转到申诉表格”,但之前的文本中写的是“跳转到表格”; 3、申诉表单按钮链接到的是一个Google通知URL; 伪造的Meta网站 当用户点击了钓鱼邮件中的申诉表格按钮后,用户将会被重定向到一个使用Bio...实际上,这个网站充当了钓鱼邮件和实际钓鱼网站之间的跳转桥梁,当用户点击“跳转到确认表格(确认我的账户)”按钮之后,用户将会被重定向到实际的钓鱼网站。...当用户点击了“继续”按钮之后,就会出现一系列提示,并要求输入特定的用户信息。每次用户单击“继续”,数据都会发送给威胁行为者。...接下来,钓鱼网站会出现一个伪造的双因素安全验证确认页面,如果用户通过单击“是”按钮进行确认,则此时会请求用户的备份码。最后一个页面,负责收集目标用户的电子邮箱地址和电话号码。

    19810

    Angular 从入坑到挖坑 - Router 路由使用入门指北

    一、Overview Angular 入坑记录的笔记第五篇,因为一直在加班的缘故拖了有一个多月,主要是介绍在 Angular 中如何配置路由,完成重定向以及参数传递。...项目中,系统的路由需要我们将一个 url 地址映射到一个展示的组件,因此需要手动的去设置 url 与组件之间的映射关系 因为我们在使用 Angular CLI 创建项目,选择了添加路由模组,因此我们可以直接在...4.1.3、重定向与通配地址 在普遍情况下,对于进入系统后的默认路径,我们会选择重定向到一个具体的地址上,这里我们在定义路由信息,定义了一个空路径用来表示系统的默认地址,当用户请求重定向到 /home...路径上,因为只有完整的 url 地址匹配空字符串才应该进行重定向操作,所以这里需要指定匹配模式是全部匹配 ?...从截图中可以看到,当我们打开系统,会自动跳转到我们指定的 home 路径,点击菜单按钮后,则会加载对应的组件页面 4.1.4、激活的路由 很多情况下,对于被选中的路由,我们可能会添加一个特定的样式来进行提示用户

    4.2K50
    领券