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

Angular2RC4-Primeng Menubar routerlink在单击后不转到我的路由

Angular2RC4是Angular框架的一个版本,Primeng是一个基于Angular的UI组件库,Menubar是Primeng中的一个组件,routerlink是Angular中用于导航的指令。

在单击Menubar中的某个选项后,如果没有跳转到指定的路由,可能是由于以下几个原因:

  1. 路由配置错误:首先需要确保在Angular的路由配置中正确定义了要跳转的路由。可以通过在app-routing.module.ts文件中的Routes数组中添加相应的路由配置来解决。例如:
代码语言:typescript
复制
const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  // 其他路由配置...
];
  1. 路由链接错误:在Menubar的选项中使用routerlink指令时,需要确保指定的路由链接是正确的。可以通过在routerlink属性中指定要跳转的路由路径来解决。例如:
代码语言:html
复制
<p-menubar>
  <ul>
    <li><a routerLink="/home">Home</a></li>
    <li><a routerLink="/about">About</a></li>
    <!-- 其他选项... -->
  </ul>
</p-menubar>
  1. 路由模块导入错误:如果在使用路由时出现问题,可能是由于路由模块没有正确导入。需要确保在使用路由的组件所在的模块中正确导入了RouterModule。例如:
代码语言:typescript
复制
import { RouterModule } from '@angular/router';

@NgModule({
  imports: [
    // 其他模块导入...
    RouterModule.forRoot(routes),
  ],
  // 其他配置...
})
export class AppModule { }

以上是解决Menubar routerlink不跳转的常见问题。如果问题仍然存在,可以进一步检查Angular版本、Primeng版本以及其他相关依赖的兼容性和配置情况。

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

相关·内容

AngularDart 4.0 高级-路由概述 顶

引导您应用时注册适当路由器提供商。 确保每个路由组件都具有列出组件使用路由器指令元数据。 有关详细信息,请参阅声明路由器提供程序和指令。...路由器插座 当此应用浏览器URL成为/#/heroes时,路由器将该URL与名为HeroesRouteDefinition匹配,并在放置宿主视图HTML中RouterOutlet显示HeroesComponent...RouterLink指令还有助于视觉上区分当前所选活动路线锚点。当关联路由链接变为活动状态时,路由将router-link-active CSS类添加到元素。...RouterLink 将可点击HTML元素绑定到路由指令。 单击具有绑定到链接参数列表routerLink指令元素会触发导航。...您可以选择“OK”并丢失您更改,或单击“Cancel”并继续编辑。 这种行为后面是路由routerCanDeactivate挂钩。

6.1K20
  • 🔥【Angular教程】路由入门

    Apphtml模板中配置 配置路由跳转&路由出口(router-outlet) 登陆| <a [routerLink...设置有效默认路由 由于我们项目默认启动无具体路由匹配这样并不友好,我们需要设置一个有效默认路由来展示给用户。 配置默认路由应该在通配路由之上。...路由定义时配置需要携带参数令牌 格式: 路由配置path后补充格式为/:key令牌占位 { path: 'detail/:id', component: UserDetailComponent...通过routerLink携带参数 复制代码 Angular获取路由参数需要用到ActivatedRoute: 使用ActivatedRoute...配置无组件路由(空路由) 对路由进行分组而增加额外路径片段 { path: 'home', loadChildren: () => import('.

    4.4K50

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

    a 标签 href 属性进行跳转,当然也是可以,不过在后面涉及到相关框架功能时就会显得有点辣么聪明样子了 4.1.3、重定向与通配地址 普遍情况下,对于进入系统默认路径,我们会选择重定向到一个具体地址上...从截图中可以看到,当我们打开系统时,会自动跳转到我们指定 home 路径,点击菜单按钮,则会加载对应组件页面 4.1.4、激活路由 很多情况下,对于被选中路由,我们可能会添加一个特定样式来进行提示用户...、query 查询参数传递 最常见一种参数传递方式,需要跳转路由地址后面加上参数和对应值,跳转页面通过获取参数 key 从而获取到对应参数值 <a href="www.yoursite.com...,<em>在</em>跳转<em>后</em><em>的</em>页面我们肯定需要获取到传递<em>的</em>参数值。...4.3、嵌套<em>路由</em> <em>在</em>一些情况下,<em>路由</em>是存在嵌套关系<em>的</em>,例如下面这个页面,只有当我们点击资源这个顶部<em>的</em>菜单<em>后</em>,它才会显示出左侧<em>的</em>这些菜单,也就是说这个页面左侧<em>的</em>菜单<em>的</em>父级菜单是顶部<em>的</em>资源菜单 ?

    4.2K50

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

    修改模板如下所示:lib/app_component.dart (template) template: ''' {{title}} <a [routerLink]="['...RouterLink指令告诉路由在用户点击链接时位置。 您使用链接参数列表定义了一个路由指令, 这个列表我们小样本中只有一个元素,引用路由名称。...你已经完成了应用程序路由。 您没有向模板添加英雄详情链接,因为用户单击导航链接不是为了查看特定英雄; 而是点击一个英雄名字,不管名字是显示仪表板还是英雄列表中。...要在其他地方导航,用户可以单击AppComponent中两个链接之一,或单击浏览器后退按钮。...()中,你正在向路由navigate()方法传递一个两元素链接参数列表(一个名字和路由参数),就像你DashboardComponent中[routerLink]绑定中一样。

    17.6K30

    【今天学了什么】前端路由实现原理

    什么是前端路由路由概念来源于服务端,服务端中路由描述是 URL 与处理函数之间映射关系。... Web 前端单页应用 SPA(Single Page Application)中,路由描述是 URL 与 UI 之间映射关系,这种映射是单向,即 URL 变化引起 UI 更新(无需刷新页面)。...里面我们一般实现路由采用是vue-router插件实现,这里我们采用vue-router插件,而是自己实现类似的路由功能。...需要注意是,vue-router增加了很多特性,如动态路由路由参数、路由动画等等,这些导致路由实现变复杂。所以这里只是对前端路由最核心部分实现。.../RouterView.vue' import RouterLink from '.

    73620

    【Vue3】Vue3中编程式路由导航 重点!!!

    Vue3 中,我们依然可以使用 Vue Router 来管理路由,并且 Vue3 中引入 Composition API 为编程式路由导航带来了全新可能性何为编程式路由导航编程式路由导航是通过代码来实现页面跳转一种方式...:对于使用辅助技术用户(如屏幕阅读器用户),他们可能会期望 标签是可以跳转到其他页面的链接,而这种误导可能会影响到他们使用体验接下来我们实现一个需求,点击首页2秒,我们要跳到娱乐,我们按照之前思路...(()=>{ setTimeout(()=>{ },2000) })因为RouterLink要写在模版里面,所以使用RouterLink...,需求英雄左边添加四个button,点击button可以显示详细信息,和点击名字出现效果是一样查看英雄</button...下面是两者之间主要区别:引入方式:Vue2: Vue2 中,你可以通过 this.$router 来访问路由器,从而进行编程式路由导航。

    37810

    Vue + Element UI 实现权限管理系统 前端篇(十):动态加载菜单

    接口模块化 我们向来讲究模块化,之前接口都集中,interface.js,我们现在把它改名为 api.js,并把里边原来登录、用户、菜单相关接口都转移到我们新建接口模块文件中。...页面菜单渲染 还是  MenuBar.vue 中,页面通过封装菜单树组件读取store数据,递归生成菜单。 ? 新建菜单树组件,递归生成菜单,并在点击响应函数里面根据菜单URL跳转到指定路由。...动态路由实现 vue route 中提供了 addRoutes 来实现动态路由,打开 MenuBar.vue ,我们加载导航菜单同时添加动态路由配置。 MenuBar.vue ?...页面刷新出大坑 先前我们是将导航菜单和路由加载放在菜单栏页面MenuBar.vue中,一切显示和路由也都正常,看起来没什么问题。然而当我们非根据路径刷新页面时,问题出现了。...刷新,菜单收起来了,然而页面还是正确停留在用户管理页面。妈妈再也不用担心我会刷新了! ?

    2.5K30

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

    ,添加 router-outlet 标签用来声明路由页面上渲染出口 Angular Router <a routerLink="/crisis-center" routerLinkActive...:是否允许通过延迟加载方式加载某个模块 添加了路由守卫之后,通过路由守卫返回值,从而达到我们控制路由目的 true:导航将会继续 false:导航将会中断,用户停留在当前页面或者是跳转到指定页面...当问题解决,就可以针对 crisis 模块设置惰性加载 配置惰性路由时,我们需要以一种类似于子路由方式进行配置,通过路由 loadChildren 属性来加载对应模块,而不是具体组件,修改...为了杜绝这种授权未通过仍加载模块问题发生,这里需要使用到 CanLoad 守卫 因为这里判断逻辑与认证授权逻辑相同,因此 AuthGuard 中,继承 CanLoad 接口即可,修改 AuthGuard...== -1) { return true; } } } 同样,针对路由守卫实现完成,将需要使用到路由守卫添加到 crisis-center 路由 canLoad 数组中即可实现授权认证不通过时不加载模块

    3.8K30

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

    const appRoutes: Routes = [ { path:'',// empty path匹配各级路由默认路径。 它还支持扩展URL路径前提下添加路由。...用Resolve路由激活之前获取路由数据。 用CanLoad来处理异步导航到某特性模块情况。 使用规则 分层路由每个级别上,我们都可以设置多个守卫。...这并不是配置中失误,而是使用无组件路由。...链接参数数组 链接参数数组保存路由导航时所需成分: 指向目标组件那个路由路径(path) 必备路由参数和可选路由参数,它们将进入该路由URL e.g.我们可以把RouterLink指令绑定到一个数组...,就像这样: Heroes e.g.指定路由参数时,我们写过一个双元素数组,就像这样: this.router.navigate(

    3.3K10

    Vue一些命名规则与SPA实现思路

    3.5 前面使用RouterLink和RouterView组件导航和显示 4. router-link相关属性   4.1 to      表示目标路由链接        4.2 replace     ..., 仅仅是获取必要数据.然后, 由页面中js解析获取数据, 展示页面中  传统多页面应用程序:      对于传统多页面应用程序来说, 每次请求服务器返回都是一个完整页面 优势...减少了请求体积,加快页面响应速度,降低了对服务器压力      更好用户体验,让用户web app感受native app流畅 2....$mount('#app');   3.5 前面使用RouterLink和RouterView组件导航和显示       <!...$router.push({    切换到name为home路由        name:'home'       });   4.3 append     设置 append 属性,则在当前

    1.9K10

    Python 学习之 Tkinter「下」

    作用: ListBox 控件小窗口显示项目列表 注意 selectmode 几种方式区别: 1.BROWSE:通常,只能从列表框中选择一行。如果单击一个项目,然后拖动鼠标会跟随选中,是默认。...# 将列表元素当做一个整体添加,不常用 lb.insert(tkinter.END, ["bird", "duck"]) # 删除元素:参数 1 为开始引用,参数 2 为结束索引,如果指出参数...Menu 控件 I # 菜单条 menuBar = tkinter.Menu(win) win.config(menu=menuBar) # 创建一个菜单选项 menu1 = tkinter.Menu...(label="Language", menu=menu1) menuBar.add_cascade(label="Color", menu=menu2) 效果图 ?...Menu 控件 II # 鼠标右键显示菜单 menuBar = tkinter.Menu(win) menu = tkinter.Menu(menuBar, tearoff=True) for i in

    2.2K20

    Python Qt GUI设计:菜单栏、工具栏和状态栏使用方法(拓展篇—2)

    例如,建立:文件、编辑两个一级菜单栏目,如下所示: 可以一级目录下建二级目录,文件栏目下建立打开栏目,如下所示: Qt Designer属性编辑器中可以对动作进行编辑,设置快捷键、图标等信息...PyQt API提供了createPopupMenu()函数创建一个弹出菜单;menuBar()函数用于返回主窗口QMenuBar对象; addMenu()函数可以将菜单添加到菜单栏中;通过addAction...2.1、Qt Creator创建工具栏 使用Qt Designer默认生成主窗口中不显示工具栏,可以通过单击鼠标右键来添加工具栏,如下图所示: 此时工具栏是空,没有组件,如下所示: 可以Qt...2.2、 工具栏类创建工具栏 QToolBar类中常用方法如下表所示: 每当单击工具栏中按钮时,都将发射actionTriggered信号。...当单击MenuBar菜单时,将triggered信号与槽函数processTrigger()进行绑定。当单击"show"菜单选项时,会在状态栏显示提示信息,并在5秒消失。

    6.2K30

    python GUI库图形界面开发之PyQt5状态栏控件QStatusBar详细使用方法实例

    PyQt5状态栏控件QStatusBar简介 MainWindow对象底部保留有一个水平条,作为状态栏(QstatusBar),用于显示永久或临时状态信息 QStatusBar类中常用方法 方法...描述 addWidget() 状态栏中添加给定窗口小控件对象 addPermanentWidget() 状态栏中永久添加给定窗口小控件对象 showMessage() 状态栏显示一条临时信息,...__init__(parent) #实例化菜单栏 bar=self.menuBar() #添加父菜单 file=bar.addMenu('File') #添加子菜单...QStatusBar代码分析 在这个例子中,顶层窗口MainWindow有一个菜单栏和一个QTextEdit对象,作为中心控件 当单击MenuBar菜单时,将triggered信号与槽函数进行绑定 #...当菜单对象被点击时,触发绑定自定义槽函数 file.triggered[QAction].connect(self.processTrigger) 当单击show菜单选项时,会在状态栏提示信息,5秒消失

    2.7K21
    领券