Angular 2 routerLink不可点击
Angular 2是一种流行的前端开发框架，它提供了一种方便的方式来构建单页应用程序。routerLink是Angular 2中的一个指令，用于在应用程序中导航到不同的路由。
在某些情况下，可能会遇到Angular 2 routerLink不可点击的问题。这可能是由于以下几个原因导致的：
- 路由配置错误：首先，需要确保路由配置正确。在Angular 2中，路由配置是通过定义一个路由模块来完成的。在路由模块中，需要指定每个路由的路径和对应的组件。如果路由配置错误，可能会导致routerLink不可点击。
- 路由模块未导入：如果使用了routerLink指令，但是没有正确导入路由模块，也会导致routerLink不可点击。需要确保在使用routerLink之前，已经正确导入了相关的路由模块。
- 路由守卫限制：Angular 2提供了路由守卫机制，用于在导航到某个路由之前执行一些操作。如果路由守卫中的逻辑导致导航被阻止，那么routerLink将不可点击。需要检查路由守卫中的逻辑，确保没有阻止导航的操作。
解决这个问题的方法包括：
- 检查路由配置：确保路由配置正确，每个路由都有正确的路径和对应的组件。
- 导入路由模块：在使用routerLink之前，确保已经正确导入了相关的路由模块。
- 检查路由守卫：如果使用了路由守卫，检查守卫中的逻辑，确保没有阻止导航的操作。
对于Angular 2 routerLink不可点击的问题，腾讯云并没有直接相关的产品或者产品介绍链接地址。然而，腾讯云提供了一系列与云计算相关的产品和服务，如云服务器、云数据库、云存储等，可以帮助开发者构建和部署应用程序。您可以访问腾讯云官方网站（https://cloud.tencent.com/）了解更多信息。
相关·内容
我在角2中一直面临着routerLink的问题，我正在使用Visual 2015，试图创建一个带有路由概念的SPA。在单击带有routerLink的锚标记时，它应该将我重定向到特定的页面，但是锚标记是不可点击的-它显示为纯文本。
MasterPage.html-
Left menu headers footers
<a [routerLink]="['Supplier']">Supplier</a>
<a [routerLink]="['Customer']">Customer</a&g
浏览 3提问于2017-01-05得票数 2
我使用'routerLink‘导航我的路线，它运行良好。但是当我再次单击同一按钮时，我希望该组件将再次加载。但目前，它并不适用于angular2。
app.component.html
<ul class="nav navbar-nav navbar-right">
<li><a [routerLink]="['/events']" routerLinkActive="active" [routerLinkActiveOptions]="{exact:t
浏览 6提问于2017-08-25得票数 6
尝试使用angular2创建SPA：
在我的主要模块中，我声明将要使用的路由和组件：mainApp.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { BaseComponent,IndexComponent, ContactComponent,
浏览 3提问于2017-03-26得票数 0
回答已采纳
我正在尝试有一个导航栏，当你点击一个子部分，它会导航到一个新的页面。现在，当您单击nav中的一个子部分时，该组件将简单地显示在主页上现有组件的下面。
这是我的app.component.html
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" routerLink="#"><img class="navBarLogo" src="../../assets/whitelogo.png"></
浏览 0提问于2019-09-29得票数 1
当页面加载导航应该隐藏时，我正在处理导航默认设置。当我点击图标时，我想像切换一样显示导航。当我将鼠标移出导航时，我应该隐藏导航。angular 4.0。
index.html
<button class='user_login' (click)='btnResult()'>
<img src="./assets/menuicon.png" >
</button>
nav.component.html
<ul class="nav navbar-nav navbar-right menu&#
浏览 0提问于2017-07-11得票数 1
我使用的是Angular2和路由，所以，当我点击一个链接时，网址会改变，但正文不会改变
这些是我的路线
import { Routes} from '@angular/router';
//Import components
import { NewComponent } from './new/new.component';
import { ShowComponent } from './show/show.component';
import { FunnelsComponent } from './funnels.componen
浏览 0提问于2018-08-02得票数 0
1回答
角材质标签动画不工作
、、、
我有角材料导航标签，如下面的样本。标签本身很好，导航也很好。我的问题是动画不起作用。当我点击一个选项卡，而不是动画，我得到三倍大小的标签几秒钟。我的BrowserAnimationsModule和MatTabsModule在我的app.module.ts的进口中。可能会有什么问题？如何修复动画？
<nav mat-tab-nav-bar>
<a mat-tab-link [routerLink]="'/'" routerLinkActive #rla="routerLinkActive" [active]="rla.
浏览 0提问于2018-10-02得票数 2
回答已采纳
我有一个应用程序是使用离子角标签模板设置。无论出于什么原因，我都无法使用RouterLink进行导航。当我单击提供了RouterLink属性的元素时，什么也不会发生。我已经搜索了几个小时，看到了和这里相同的建议：RouterLink not working in child components 实际上，我已经在所有页面的导入中添加了RouterLink，但仍然没有成功。使用angular ionic选项卡模板，我将从选项卡页转到嵌套的详细信息页。选项卡页面使用RouterLink成功导航到我的详细信息页面。但在我的详细信息页面中，我无法设置链接或按钮来使用RouterLink导航到另一条路
浏览 21提问于2020-06-20得票数 0
我有以下文件：
.html
<nav>
<md-toolbar color = "primary">
<a [routerLink] = "['new-patient']">New Patient</a>
<button md-icon-button
color = "accent">
<md-icon class = "material-icons md-24">person_add&
浏览 2提问于2016-05-27得票数 5
回答已采纳
我正在做菜单导航。我有一个菜单图标，我想添加类到它来控制它从主要的css文件。
当页面加载时，我想隐藏导航。当我点击图标时，我想显示导航。当我将鼠标移出导航时，我应该隐藏起来。我对如何从哪个文件调用css感到困惑，我不得不在app.component.ts中编写单击事件或在哪里。我必须在angular 4.0中做所有这些事情。
Thanks in advance.
<img src="./assets/menuicon.png" [ngClass]="iconStyle">
<ul class="nav navba
浏览 9提问于2017-07-10得票数 0
1回答
如何根据点击源过滤同页数据
、、、、
在我的数据库中，我有一个带有特定来源的名字列表。在我的导航栏中，我为每个源都有一个链接。我是angular的新手，我的第一个方法是为每个源创建一个“页面”。我的问题是:有什么捷径可以做到吗？例如:点击链接A，我将进入页面，我得到了来源A的列表。点击链接B，我仍将进入相同的页面，但我获得了来源B的列表……
每个原点(原点1,2,3 ...)
public function index()
{
$identity = name::orderBy('name')->where('origin_link', 1)->get();
retur
浏览 0提问于2020-11-22得票数 1
6回答
我想改变我的按钮颜色点击使用角度和css，因为我是非常新的。
.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'title';
}
.html
<mat-sidenav
浏览 1提问于2020-08-05得票数 2
2回答
角6-点击外部菜单
、、、、
我正在创建一个click事件来记录关闭我的备用菜单的文档，我在jquery中创建了示例，但是我不想在jquery中这样做，并且我不能访问' menu‘变量。
我怎么能把这个写成纯角度的？
import { Component, HostListener, ElementRef } from "@angular/core";
import { Router } from "../../node_modules/@angular/router";
@Component({
selector: "app-root",
template
浏览 0提问于2018-07-31得票数 3
回答已采纳
2回答
我有一个用angular 7实现路由的问题。代码很简单，但我找不到问题是什么。也许你能帮我。 代码如下： import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<div class="container">
<a routerLinkActive="active"
routerLink="/login">Login</a&
浏览 42提问于2019-03-06得票数 0
2回答
我想将网页保存在内存中，这样当我点击后退按钮(而不是浏览器上的那个)或路由器链接时，如果我已经访问过它，HTML页面就会立即加载(因为我有一些数据要加载，而我不想被重新加载)。
我见过一个带有选项卡式界面的方法：，但它不适合我的代码体系结构。
我在angular2中使用routerlink来导航抛出的页面，并在单击时使用back按钮调用函数以转到上一页。
我尽可能地详细介绍，这样人们就可以更好地理解我的代码体系结构和routerlink方法的工作方式。
后退按钮功能(独立于routerlink工作)：
goBack() {
window.history.back();
}
从第1页到第2
浏览 0提问于2016-06-14得票数 3
Angular支持将主路由作为字符串属性。
即
<button routerlink="/path1">Click Me!</button>
但是，当有多个插座时，添加辅助路由不起作用：
<button routerlink="/path1(foo:/path2)">Click Me!</button> <<-- does not work
有没有办法做到这一点呢？
注意:我意识到可以通过以下方式实现这一点：
<a [routerLink]="['/path1', { o
浏览 0提问于2017-07-30得票数 1
我尝试创建一个简单的angular2组件，并且在将指令绑定到原生DOM元素时出错。
例如：
/// <reference path="../../typings/_custom.d.ts" />
import { Component, View } from 'angular2/angular2';
import { RouterLink } from 'angular2/router';
@Component({
selector: 'my-component',
directives: [Rou
浏览 4提问于2015-08-27得票数 6
回答已采纳
1回答
嘿，我有一个汉堡包菜单，很明显，点击时会得到一个is-active类，这个类会根据点击的不同而切换，我的问题是当我在主页上时，它会工作，然后我通过routerLink点击另一个页面，它会工作，但是当我点击第二个页面时，它会按编程删除类is-active，但是当我再次单击它时，它不会添加类is-active，但是如果我再次单击它，则会应用is-active .如果我从一个不在家的页面开始，我会点击汉堡包什么都不会发生，如果我再次点击它，is-active类就会被应用，我不知道这里发生了什么，如果有人知道这会有很大帮助
app.component.html
<router-outlet>
浏览 2提问于2017-12-20得票数 0
我是Angular2的初学者。当我从学习angular2路由服务时。我希望总是显示英雄组件，所以我在app.component.html中是这样的：
<h1>{{title}}</h1>
<nav>
<a routerLink="/dashboard">Dashboard</a>
<a routerLink="/heroes">Heroes</a>
<a routerLink="/dummy">Dummy</a>
</na
浏览 0提问于2018-05-23得票数 2
我不能用HomeComponent使用RouterLink，但是可以用NavbarComponent访问它。我有相同的组件代码与2(从ng g component生成)与不同的模板视图。app.module.ts的代码在这里
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpMod
浏览 1提问于2017-02-12得票数 0
回答已采纳
1回答
我有一个导航组件，它使用ng-bootstrap作为带有下拉列表和一些链接的导航，如下所示：
<header>
<div class="container">
<nav class="navbar navbar-expand-md navbar-light bg-light container">
<a class="navbar-brand" href="#"><img width="150 px" src="/assets/images/lo
浏览 5提问于2020-02-25得票数 0
我是Angular 2的新手，还处于学习阶段，但我陷入了一个问题，没有得到解决方案。请帮帮忙。
我已经做了一个登录视图，然后链接到它点击链接后，它将重定向到主页，然后点击一个链接，它将重定向到其他一些视图。
下面是我的代码结构：
app.routing.ts：
import { Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
浏览 0提问于2018-02-06得票数 0
1回答
我在玩Angular2辅助线路，我想不出什么办法。
假设我们有一个基本的邮件应用程序，也有一些联系人。
基本上，我的HTML看起来如下：
<div>
<a [routerLink]="['emails']">Emails</a>
<a [routerLink]="['contacts']">Contacts</a>
<a [routerLink]="[{outlets: {aux: ['auxiliary']}}]">
浏览 6提问于2016-09-21得票数 2
7回答
我正尝试在我的Angular 7应用程序中使用带有href的锚标签。当我点击链接时，浏览器中的url会改变，但是页面不会被导航到。如果我把target=写成“_self”，它就能工作。
<a href="/abcd" target="_self">Abcd</a>
但是，这并不只是浏览器中的url发生了变化，而是什么也没有发生。
<a href="/abcd">Abcd</a>
就像我使用Angular routing和RouterLink一样，它可以工作。
<a routerLink=
浏览 7提问于2019-09-24得票数 24
我需要从服务器加载数据并加载ngx-datatable。点击一个特定的列(链接<a href="randomurl"/>或routerLink=“随机组件”)，它应该重定向到不同的页面，或者它应该显示一个模式窗口。
我是Angular 2+的新手
浏览 3提问于2018-10-06得票数 2
我如何从一个组件路由到另一个路由器-出口的角度2？
login.component.html
... login form ...
<a (click)="gotoSignup()">gotosignup</a>
<a routerlink="signup">singup</a>
<a routerlink="/signup">/singup</a>
<a routerlink="/signup/">singup</a>
<a r
浏览 1提问于2016-12-05得票数 3
回答已采纳
我有一个侧边栏，里面有这些元素：
<ul class="nav nav-pills flex-column">
<li class="nav-item collapsed side" data-toggle="collapse" data-target="#home" >
<a class="nav-link" routerLinkActive="active" routerLink="/home" [routerLin
浏览 0提问于2017-11-22得票数 1
angular2路由器有问题，当我点击带有`routerLink=“‘/it console gives me an error of’it console gives me an error of原始异常: TypeError:无法读取url的属性'startsWith‘的链接时，它工作正常。”
我根本没有改变任何东西，这个错误是凭空而来的。我在我的代码中找不到任何东西，所以不确定这是否是一个依赖问题。其他人也有这个问题吗？
<a [routerLink]="['/reserve']" class="float-shadow"&g
浏览 4提问于2016-08-02得票数 0
1回答
当设置一个(单击)属性时，我会得到以下错误。
我的代码是
import { Component, NgZone, AfterContentInit } from 'angular2/core';
import { NgIf, NgFor } from 'angular2/common';
import { Accounts } from 'meteor/accounts-base';
import { RouterLink, RouteConfig, Router, ROUTER_DIRECTIVES } from 'angul
浏览 4提问于2016-04-26得票数 0
回答已采纳
我有一个场景，需要加载一个使用angular2路由构建的菜单。在特定组件中，我需要加载另一个菜单/选项卡，这只不过是另一个angular2路由组件。请找到我的需求的快照
请找到主菜单的代码
import {Component, bind} from 'angular2/core';
import {ROUTER_PROVIDERS, RouteConfig, ROUTER_DIRECTIVES, APP_BASE_HREF, LocationStrategy, RouteParams, ROUTER_BINDINGS} from 'angular2/router'
浏览 2提问于2016-06-15得票数 0
回答已采纳
2回答
我正在用Angular2做一个小试验项目，在那里我有一个菜单和一个子菜单。因此，我需要某种嵌套的子菜单路由。我在案例研究中提到了angular.io站点:英雄之旅部分，但未能成功地实现它。
我的主菜单(导航)具有以下路由配置
@RouteConfig([
{ path: '/letter/...', name: 'Letter', component: LetterComponent },
{ path: '/contact', name: 'Contact', component: ContactsCompone
浏览 4提问于2016-04-07得票数 2
回答已采纳
我试图根据组件中的一组动态项在指令中设置routerLink值。但是，Angular2引发了一个错误：
EXCEPTION: Template parse errors:
Parser Error: Got interpolation ({{}}) where expression was expected at column 1 in [ {{item.routerLink}} ] in AppHeader@5:40 ("
<a *ngFor="let item of headerItems" [ERROR ->][routerLink]="
浏览 7提问于2016-05-06得票数 50
回答已采纳
我的routerLinks在我的Angular2应用程序中工作。从我的主下拉菜单，当我点击链接，他们加载正确的URL和相应的正确的组件。但是，我在应用程序的另一部分中列出了相同的链接，由于某种原因，它们在应用程序中不起作用。我点击它们，什么都不会发生-没有URL更改，也没有加载组件。工作实例和非工作实例之间唯一的区别是，非工作实例包括附加到"ul“中的"li”项的链接。首先，我将列出正在工作的代码：
<div class="nav-menu-item indent"><a routerLink="about">About
浏览 1提问于2016-11-11得票数 0
回答已采纳
1回答
我试图理解角2中的路由，我构建了一个非常简单的应用程序，它都是关于路由的。我发现很难理解把<route-outlet></route-outlet>放在哪里
应用程序的工作应如下：
我在浏览器控制台上遇到的错误：
EXCEPTION: Error during instantiation of Router! (RouterOutlet -> Router).
Error during instantiation of Router! (RouterOutlet -> Router).
EXCEPTION: Child routes are not
浏览 3提问于2016-06-03得票数 0
回答已采纳
1回答
我要疯狂地尝试在角2上安装一个简单的测试应用程序。我有3页/组件，我想用新的组件路由器加载。我让它半工半读。目前我有两个问题..。
1 -如果您键入要转到Ex的组件的路径，则为。"“不是加载我的Test2页面，而是失败地说它找不到那个路径。
2 -当我尝试加载不同的页面时，当我第一次点击一个链接时，它会正确地加载页面。当我单击链接时，所有其他页面都会抛出异常。
这是我的设计：
App.ts
import {Component, bootstrap, provide} from 'angular2/angular2';
import {ROUTER_PROVIDERS,
浏览 2提问于2015-10-24得票数 2
回答已采纳
1回答
在我的angular4项目中，我试图实现子路由。而路线是
path: 'adminPanel', component: AdminPanelComponent,
children: [
{
path: '',
redirectTo: 'dashboard', pathMatch: 'full'
},
{
path: 'dashboard',
component: DashboardComponent
},
{
path: 'setting1'
浏览 3提问于2017-09-02得票数 0
回答已采纳
1回答
我使用的角度2与物化-CSS。我遇到的问题是，当我把页面缩小到汉堡包出现在侧导航的位置时，在我点击汉堡后，边导航就不会弹出，屏幕也会明显变暗。它永远不会像它应该的那样滑出来。
我的组件在下面
import { Component, OnInit, ElementRef } from '@angular/core';
declare var jQuery: any;
@Component({
selector: 'core-app',
template: `
<div class="navbar">
<nav c
浏览 3提问于2016-11-16得票数 1
回答已采纳
2回答
从html页面，我想使用routerLink和state路由到另一个页面。使用标签没有问题，在登陆页面的ngOnInit中，我可以按预期检索状态。使用标记主页也可以导航，但状态结果未定义。
我怎么了？
登录页html
<button routerLink="/home" [state]="navExtra.state">
Go Home Page via button
</button>
<a routerLink="/home" [state]="navExtra.state">Go
浏览 4提问于2019-09-30得票数 3
回答已采纳
我试图得到一个简单的应用程序与子路由。
当我在子组件上设置路由时，会收到以下错误消息：
Link "["ChildItem"]" does not resolve to a terminal instruction
如果我将所有路由放置在父组件上，它将正确工作。如果在子组件和父组件之间拆分路由，则会得到上述错误。
它与同一组件上的所有路由一起工作：
import {bootstrap} from 'angular2/platform/browser';
import {Component, provide} from 'angular2/
浏览 3提问于2015-12-16得票数 16
回答已采纳
我有一个卡片列表，每张卡片都有一些数据，比如{"phone":"333-123-4566", "cust_name":"john smith"}
我有一个列表组件和一个卡片组件来显示电话和姓名。
angular2或angular4如何将项目数据传入卡片组件？我需要知道点击的是哪张卡，并显示正确的电话/姓名。
在Angular 1中，使用ngModel非常简单，但我在angular2/4中找不到简单的解决方案。
<ul>
<li *ngFor="let item of items; let i=inde
浏览 3提问于2017-07-19得票数 0
回答已采纳
我想在没有按钮的情况下在angular2中加载一个angular2，但不知道怎么做。这是如何用一个按钮来完成这个任务：
<button (click) = "load()" ><a routerLink="/next" routerLinkActive="active"> Load> </a></button
现在，我不知道如何在函数中而不是标记中设置routerLink active。
我的尝试：
constructor(){{
load(){
routerLink="/game
浏览 4提问于2016-11-30得票数 1
回答已采纳
1回答
导航栏项目突出显示
、、、
我有一个关于导航条的问题。当我点击一个项目时，我想要突出显示一个导航栏项目，但是我不知道我需要使用angular还是css。你能给我一点指引吗？
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a routerLink="/tasks" class="nav-l
浏览 17提问于2020-02-19得票数 1
回答已采纳
在angular 2项目中集成的正确方式是什么？我已经完成了提供的必要步骤。但火狐的动画效果仍然起伏不定。
我已经使用最新的angular cli (版本: 1.0.3)创建了一个新的angular项目，并通过在package.json中编辑依赖项降级了angular版本。动画在chrome中工作正常。
我是不是漏掉了什么？
Package.json -
"dependencies": {
"@angular/common": "~2.4.1",
"@angular/compiler": "~2.4.1&#
浏览 16提问于2017-07-20得票数 2
回答已采纳
2回答
产品类别的角度路由
、、、
嗨，我正在创建一个Shop页面在角4，我面临一个问题与角路由，当用户点击一个产品类别，网站应该重定向他/她到商店的网页。
在我的主页上。我给出了两个产品类别的链接-
<h2>Product Categories</h2>
<a [routerLink]="['/shop', id]>Jeans</a>
<a [routerLink]="['/shop', id]>Shirts</a>
对于商店页面组件，我创建了服务，从JSON文件中获取数据
export const PROD
浏览 3提问于2018-05-06得票数 0
回答已采纳
我正在尝试动态创建带有urls列表的链接：
<span *ngIf="item.type=='link'">
<a class="nav-link" [routerLink]="item.routerLink" skipLocationChange>{{item.label}}</a>
</span>
当我在我的localhost中运行dev时，这个解决方案工作得很好，但在尝试构建我的库时，我得到了以下错误：
RROR: Can't bi
浏览 0提问于2021-02-24得票数 0
目前，我正在玩angular2路由。每件事情都像预期的那样正常工作，但是在浏览器中手动输入路由url就不能工作了。
我正在使用的当前代码
app.ts
import {Component} from 'angular2/core';
import {Route,RouteConfig,ROUTER_DIRECTIVES,ROUTER_PROVIDERS} from "angular2/router";
import {DashboardComponent} from "./dashboard/dashboard.component"
浏览 4提问于2016-02-13得票数 4
我是angular 5的新手，我正在尝试在单个div标签内路由多个组件，以下是我的代码：
const routes: Routes = [
{
path:'course',
component: POC1Component
},
{
path: 'playlist',
component: POC2Component
}
];
在上面的代码中，我有两个不同的组件
<div>
<router-outlet></router-outlet>
</div&
浏览 6提问于2018-07-07得票数 0
我在使用Angular2路由器时遇到了问题，我无法解决它。
这是我的index.html
<html lang="">
<head>
<title>Angular2 Webpack Starter by @gdi2990 from @AngularClass</title>
...
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://co
浏览 3提问于2016-01-06得票数 2
回答已采纳
1回答
我有3个div和3个按钮，点击显示一个div，但我试图实现的是设置div-nr1默认显示这是im使用的角度代码.
var app = angular.module('app',[]);
app.controller('Test',function($scope){
$scope.show = 1;
});
这是纽扣
<ul>
<li class="has-subnav" ng-click="show = 1">
浏览 0提问于2018-11-29得票数 1
回答已采纳
2回答
我有Angular5 application.This是我的app.module.ts的样子。
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms
浏览 0提问于2018-06-26得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
