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

按钮路由在Angular 2中不起作用

可能是由于以下几个原因导致的:

  1. 路由配置错误:首先需要确保在Angular 2的路由配置中正确定义了按钮的路由。在路由配置中,需要指定按钮的路径和对应的组件。
  2. 路由导航错误:如果按钮路由没有起作用,可能是因为在按钮的点击事件处理函数中没有正确导航到目标路由。可以使用Angular的路由导航器(Router)来实现路由导航。
  3. 模块导入错误:如果按钮路由仍然不起作用,可能是因为相关的模块没有正确导入。在Angular 2中,需要在模块的imports数组中导入相关的路由模块。
  4. 路由守卫问题:如果按钮路由不起作用,可能是由于路由守卫的限制导致的。路由守卫可以用来控制路由的访问权限,如果没有正确配置路由守卫,可能会导致按钮路由无法访问。

总结起来,按钮路由在Angular 2中不起作用可能是由于路由配置错误、路由导航错误、模块导入错误或路由守卫问题导致的。需要仔细检查以上几个方面,确保按钮的路由配置正确,并且在按钮的点击事件处理函数中正确导航到目标路由。如果问题仍然存在,可以进一步检查模块导入和路由守卫的配置。

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

相关·内容

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

    添加路由 应该在用户点击按钮后显示英雄而不是自动显示。 换句话说,用户应该能够导航到英雄列表。 更新pubspec 使用Angular路由angular_router)启用导航。...由于路由自己的包中,首先将该包添加到应用的pubspec: ? 并非所有的应用程序都需要路由,这就是为什么Angular路由器处于独立的可选软件包中的原因。...仪表板或英雄列表中选择英雄不起作用。 你会接下来的处理。 选择一个仪表板英雄 当用户选择仪表板中的英雄时,应用程序应该导航到HeroDetailComponent以允许用户查看和编辑选择的英雄。...查看详细信息按钮不起作用。 更新HeroesComponent类 响应按钮单击,HeroesComponent导航到HeroesDetailComponent。...按钮的点击事件绑定到一个gotoDetail()方法,该方法应该通过告诉路由器去哪里命令性地导航。 这种方法需要对组件类进行以下更改: 导入angular_router。

    17.6K30

    AngularDart 4.0 高级-路由概述 顶

    点击浏览器的后退和前进按钮,浏览器会前后浏览您浏览过的网页的历史记录。 Angular路由器借鉴了这种模式。 它可以将浏览器URL解释为导航到客户端生成视图的指令。...并且路由浏览器的历史记录中记录活动,所以后退和前进按钮也起作用。 设置概述 添加angular_router 路由器功能位于angular_router库中,该库自带软件包。...在任何使用路由器功能的Dart文件中,导入路由器库: import 'package:angular_router/angular_router.dart'; 注册提供者和列表指令 如果您已经熟悉Angular...引导您的应用时注册适当的路由器提供商。 确保每个路由组件都具有列出组件使用的路由器指令的元数据。 有关详细信息,请参阅声明路由器提供程序和指令。...如果您点击了浏览器的后退按钮而不是“返回”按钮,该应用程序也会将您返回到英雄列表。 Angular的应用程序像正常的网页导航一样更新浏览器的历史。 现在点击危机中心链接查看正在进行的危机列表。 ?

    6.1K20

    Angular学习(01)-架构概览

    而页面的跳转,通常有以下几种场景: 用户输入 url 进行跳转 用户点击交互按钮进行跳转 用户操作前进或后退进行跳转 这些场景,路由的工作机制都能够很好的支持。...组件与模板 Angular 中,最常接触的应该就是组件了。 我是这么理解的,组件可以是你界面上看到的任何东西,可以是一个页面,可以是页面上的一个按钮。...实现这个,你当然可以 TypeScript 中去书写这些逻辑,但要应用到每个按钮上,就比较繁琐。...这个时候,就可以将这些工作都封装到指令内部,然后每个按钮标签上加上该指令,Angular 解析模板时,发现了这个指令,就会为每个按钮都加上这么一段程序逻辑。...当然,上面举的场景,也可以自己封装个按钮组件,然后在其他模板中,不使用原生按钮,而使用封装后的按钮组件,也可以达到目的。

    3.6K50

    Angular中sweetalert弹框的使用详解

    所以我就想办法将sweetalert用到项目中,项目中引入sweetalert时,遇到诸多问题,但最终我不懈坚持下,都解决了,实现了效果。具体用法请看下文。...一定要注意版本,如果angular-sweetalert版本过高,所依赖的文件angular版本过低,会导致引入报错。...5、警告信息弹窗,“确认”按钮带有一个函数  效果: 1 swal({ 2 title: "审批", 3 text: "确定通过审批吗", 4 icon: 'warning',...2、API问题 在这个版本中以下写法只能实现title和text的效果,其他属性都不起作用 1 swal({ 2 title: "确定删除吗?"..., "success"); 12 }); 在这个版本中只能按照我最上面所列举的去实现,那是我官方英文文档中发现的,中文文档太坑了。

    2.8K40

    使用Angular CLI生成 Angular 5项目

    但是对已经生成的components/directives就不起作用了. 那么如何保证生成的项目的components/directives前缀是您想要的呢?...查看angular-cli.json, 可以文件的下方看到采用的是scss样式文件: ? 这样, 以后生成的component的默认样式文件就是scss了....如果想手动为项目配置路由的话, 还是需要一些步骤的, 所以可以使用这个参数直接生成带路由配置的项目. 看一下项目路由文件: ? 再查看一下app.module: ?...综上, ng new 的这些参数可以在生成项目的时候作为命令的参数联合使用, 其中有一些参数也可以项目生成以后通过修改angular-cli.json文件来做修改....如果我该项目目录执行: ng set defaults.styleExt css 那么该项目的设置就会改变: ?

    1.9K30

    大漠穷秋:全面解读Angular 4.0核心特性

    NgModule 真正开发业务系统的时候,光有UI组件是不够的,还有服务、路由以及各种各样的directive。 模块是用来组织业务代码的利器。...Router 如果没有router,浏览器的前进后退按钮就不能用,也无法把URL拷贝并分享给你的朋友。...Angular新版本中静态路由只要写component属性,说明这个路由需要交给哪个component来处理,Angular就会自动创建这个component并渲染出来。...Angular新版本里,module是最小的打包和加载单位。 路由守卫用来防止未授权的访问。...在前端需要对路由做一定的防护,但目前的防护还远远不够,最重头的还是server端,Angular就提供了这样一些特性。

    2.1K50

    实战 | Change Detection And Batch Update

    为了更好的观察出React的更新机制,我们将点击按钮的逻辑换成下面的代码: 打开控制台,点击按钮你会发现打印了0 0,同时页面数据也更新成了2。...我们再试试第三种情景XHR,将点击按钮的逻辑换成下面的代码: 打开控制台,点击按钮你会发现打印的还是1 2,这究竟是什么情况?...新手常碰到的一个问题就是为啥下面的代码不起作用。...小结 Angular1中我们是直接操作数据的,这个过程Angular1是感知不到的,只能在某个点调用$apply进行脏值检测,所以默认就是批量更新。...由于事件系统用的Vue提供的,是可控的,我们再看下定时器下执行的情况: 打开控制台,点击按钮会发现依旧打印了0 0,有人可能就疑惑了Vue是不是跟Angular2一样也修改了异步方法的原生实现呢?

    3.2K20

    Angular CLI 简介

    但是对已经生成的components/directives就不起作用了. 那么如何保证生成的项目的components/directives前缀是您想要的呢?...使用Angular CLI生成路由 第一篇文章是: "使用angular cli生成angular5项目" : http://www.cnblogs.com/cgzl/p/8594571.html 第二篇文章是...下面再生成两个components: ng g c dashboard ng g c order 然后app-routing.module里面设置路由: 再修改一下html: 运行一下应用: ng...再生成一个module, 并且带着路由module (可以先使用-d参数查看将要生成的文件): ng g m admin --routing admin module里面, 再创建一个admin component...首先执行ng test: 然后点击debug, 并打开开发者工具: 然后按cmd+p: 找到需要调试的文件: 设置断点: 然后spec里面也设置一个断点: 最后点击浏览器的刷新按钮即可:

    6.1K110

    Angular 英雄示例教程

    英雄指南教程(Tour of Heroes)涵盖了 Angular 的基本知识。 本教程中,你将构建一个应用,来帮助人事代理机构来管理一群英雄。...本教程的最后,你的应用可以做下面的工作: 使用Angular 的内置指令(Angular directives)来显示 / 隐藏元素,并显示英雄数据的列表。...让用户可以主列表中选择一个英雄,然后详情视图中编辑他。 使用管道来格式化数据。 创建共享的服务来管理这些英雄。 使用路由不同的视图及其组件之间导航。...如果你主面板中单击英雄名称 "Magneta" 时,路由将会打开 "Hero Details(英雄详细)"页面。在这个页面中,你可以对英雄的名字进行修改。...你可以点击 “View Details(查看详情)” 按钮进入所选英雄的编辑视图。 下面这张图汇总了所有可能的导航选项。

    1.5K30

    Angular JS + Express JS入门搭建网站

    由此项目不忙的时候,自己于是有时间和兴趣学习一下Angular JS与Express JS。   同时自己实现了一个最简单的Angular JS + Express JS的网站示例。 一....建议使用另外一种方式,就是用Angular JS的另一个Module ng-route,做路由控制,针对不同的路径,同一个文件中定义好各自的控制器。...文件,否则不起作用。   ...Express JS   示例的前端中,我们使用Angular JS框架开发了Html页面以及对应的JS文件。但网站的后台就要用其他技术了。...http.createServer(app).listen(3000);   这里,就是使用Express JS建立一个server,注意第8行代码的作用是指定页面的文件夹,第10句的作用是关于路径/的路由信息

    4.4K60

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

    一、Overview Angular 入坑记录的笔记第五篇,因为一直加班的缘故拖了有一个多月,主要是介绍 Angular 中如何配置路由,完成重定向以及参数传递。... Angular 项目中,系统的路由需要我们将一个 url 地址映射到一个展示的组件,因此需要手动的去设置 url 与组件之间的映射关系 因为我们使用 Angular CLI 创建项目时,选择了添加路由模组...当定义好路由信息后,我们需要在页面上使用 标签来告诉 Angular 何处渲染出页面。...解析路由时,是按照我们定义路由时的顺序依次进行的,一旦匹配就会立即终止。...从截图中可以看到,当我们打开系统时,会自动跳转到我们指定的 home 路径,点击菜单按钮后,则会加载对应的组件页面 4.1.4、激活的路由 很多情况下,对于被选中的路由,我们可能会添加一个特定的样式来进行提示用户

    4.2K50

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

    支持Angular Universal,可以服务器上运行Angular应用程序。 版本9 Angular 9已于2020年2月6日发布。第9版默认情况下使用Ivy编译器。...Vue中,组件本质上就是一个带有预设选项的Vue实例。下面的代码片段包含了一个Vue组件的例子。该组件显示了一个按钮,并打印出按钮被点击的次数。 ?...为了解决这个问题,许多客户端路由器用 "hashbang"(#!)来划分动态URL,例如page.com/#!/。然而,HTML5中,大多数现代浏览器都支持不使用hashbang的路由。...此外,当某些浏览器事件发生在按钮或链接上时,使用前端路由器可以有意识地转换浏览器路径。 Vue本身并没有自带前端路由。...它支持将嵌套路由映射到嵌套组件,并提供精细化的过渡控制。添加了vue-router后,组件只需映射到它们所属的路由,父/根路由必须指明子路由的渲染位置。 ?

    22.1K20

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

    ,添加 router-outlet 标签用来声明路由页面上渲染的出口 Angular Router <a routerLink="/crisis-center" routerLinkActive...4.2、路由守卫 Angular 中,路由守卫主要可以解决以下的问题 对于用户访问页面的权限校验(是否已经登录?已经登录的角色是否有权限进入?)...跳转到组件前获取某些必须的数据 离开页面时,提示用户是否保存未提交的修改 Angular 路由模块提供了如下的几个接口用来帮助我们解决上面的问题 CanActivate:用来处理系统跳转到到某个路由地址的操作...UrlTree:取消当前的导航,并导航到路由守卫返回的这个 UrlTree 上(一个新的路由信息) 4.2.1、CanActivate:认证授权 实现路由守卫之前,可以通过 Angular CLI... AuthGuard 这个路由守卫类中,我们模拟了是否允许访问一个路由地址的认证授权。

    3.8K30
    领券