Angular Routerlink不工作，我做的一切都是正确的
Angular RouterLink不工作可能有多种原因。以下是一些可能的解决方案和调试步骤：
- 确保正确导入了Angular的Router模块。在组件文件的顶部添加以下导入语句：
- 确保正确导入了Angular的Router模块。在组件文件的顶部添加以下导入语句：
- 确保在组件的构造函数中注入了Router服务：
- 确保在组件的构造函数中注入了Router服务：
- 检查模板中的RouterLink语法是否正确。确保使用了正确的路径和参数。例如：
- 检查模板中的RouterLink语法是否正确。确保使用了正确的路径和参数。例如：
- 确保在应用的根模块（通常是AppModule）中正确配置了路由。检查是否在RouterModule的imports数组中添加了正确的路由配置。
- 检查是否在路由配置中定义了目标路径。在路由配置文件中（通常是app-routing.module.ts），确保定义了正确的路径和组件。例如：
- 检查是否在路由配置中定义了目标路径。在路由配置文件中（通常是app-routing.module.ts），确保定义了正确的路径和组件。例如：
- 如果使用了子路由，请确保在父组件的模板中使用了正确的RouterOutlet指令。例如：
- 如果使用了子路由，请确保在父组件的模板中使用了正确的RouterOutlet指令。例如：
- 检查浏览器的开发者工具控制台是否有任何错误消息。如果有，请根据错误消息进行调试。
如果以上步骤都没有解决问题，可能需要进一步检查代码和调试。可以尝试使用Angular的调试工具，如Augury或Angular DevTools，来检查组件树、路由状态和事件。此外，可以在组件中添加日志语句，以便在控制台中查看特定的变量和事件。
腾讯云提供了一系列与云计算相关的产品和服务，包括云服务器、云数据库、云存储等。您可以访问腾讯云官方网站（https://cloud.tencent.com/）了解更多详细信息和产品介绍。
相关·内容
我试图使用routerLink加载一个父->子->子路由器出口的页面，其中有两个指定的出口。
http://localhost:4200/#/output/(output:details/(data:distributions))
1)如果我将URL粘贴到浏览器中，它就能工作
2)如果我使用下面的方法，它就能工作：
this.router.navigateByUrl('output/(output:details/(data:distributions))');
如果我尝试在angular2选项卡组件中使用路由器链接，则IT无法工作
[routerLink]=&#
浏览 1提问于2017-06-10得票数 1
回答已采纳
这是我的index.html：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Code Concrete</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link
浏览 2提问于2018-05-08得票数 0
我用JavaScript在angular HTML中添加了routerLink属性：
let Link: string = "routerLink";
tailDiv.setAttributeNS(null, Link, this.subItems[i].route)
tailDiv元素如下所示：
<div class="tail" routerLink="/panel/country/add">کاربر جدید</div>
但它不工作，也不在链接中。
有什么问题吗？
浏览 0提问于2019-08-23得票数 0
我有一个长的文本显示在我的应用程序，所以我想使用字符串的HTML。
// component
description: string = `<p>Hello world. <a routerLink="/home">Click here</a> to go to the home page.</p>`;
// template
<div class="content">
<div innerHTML="description"></div>
</div
浏览 0提问于2019-04-29得票数 1
回答已采纳
有人能告诉我在我的项目中使用多个模块时如何正确设置路由吗？我有在中声明了一些组件的app.module和courses.module。我想知道如何在courses.module中连接模块并正确编辑路由，即共享路由："/courses/list“和"/courses/detail”
app.routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
//import { Cou
浏览 4提问于2017-11-17得票数 20
回答已采纳
我试图得到一个简单的应用程序与子路由。
当我在子组件上设置路由时，会收到以下错误消息：
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
回答已采纳
在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
回答已采纳
我已经创建了一个组件，其中包含一个具有routerLink属性的元素，我想从使用该组件的模板中设置该属性。当我尝试这样做时，我得到错误信息‘无法读取属性’路径‘的未定义’。
我的组件看起来是这样链接的：
info-box.component.ts
import { Input, Component } from "@angular/core";
import { ROUTER_DIRECTIVES } from "@angular/router";
@Component({
selector: "info-box",
templ
浏览 1提问于2016-07-05得票数 8
Angular 2.3.0
我定义了一个像这样的角2模块：
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { AppComponentRoute } from './components/+app/index';
import { AppCompon
浏览 6提问于2016-12-12得票数 1
1回答
我有一个常规的angular 4应用程序，我使用路由器，ActivatedRoute.params.subscribe，routerLink等在页面之间导航和解释URL。
这导致了一个事实，我有很多“魔法字符串”到处飞，因为许多不同的.ts文件中都有url片段。当然，这是可行的，因为它们是匹配的，但在我看来，这似乎是一种纠缠。下面是一个随机的例子：
<a [routerLink]="['/foo']">Home</a> <a [routerLink]="['/foo/item', 1]">It
浏览 0提问于2017-08-29得票数 4
我正在尝试动态创建带有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
2回答
我有一个运行在apache web服务器上的单页网站，使用angular cli编写。我有一个主页和多个链接，使用routerlink标签导航，工作正常。然而，当我点击"about"，例如，它导航到website.net/about，一切都是完美的，直到页面重新加载，或者当它抛出404错误时，我手动输入website.net/about。
这是应用程序的主要代码：
index.html：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8&
浏览 57提问于2018-05-27得票数 0
1回答
假设我有一个非常基本的组件，它是角组件库的一部分，如下所示：
mycomponent.module.html
<div>
<a routerLink="/">
</div>
mycomponent.component.ts
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'my-component',
templateUrl: './mycomponent.componen
浏览 3提问于2020-01-09得票数 0
回答已采纳
由于最新的Angular2版本(2.0.0-beta.14)，有可能有包含多个斜杠的查询参数，如/foo/bar。
这很好，但是每当我在RouterLink链接中使用带有多个斜杠的参数时，它就会用%2F逃避/，导致路由不再在重新加载上工作。
我的链接如下：<a [routerLink]="['/Page', {page: page.url | slug}]" class="list-group-item">{{ page.title }}</a>
在“弹”管的内部，我甚至URIDecode字符串，当我记录它是正确的。它会记
浏览 8提问于2016-04-13得票数 9
回答已采纳
我在Angular (版本5)中遇到了一个特殊的问题，我在angular中设置了一些路由，如下所示：
{path: 'calendar', canActivate: [AuthGuard], component: ProjectsComponent }
{path: 'map', canActivate: [AuthGuard], component: MapComponent }
然后，在我的网页标题中，有一些按钮可以激活这些路由。
<li routerLinkActive="active"><a [routerLink]
浏览 0提问于2018-05-02得票数 1
在Angular中，我如何编译通过API发送的内容，就像$compile在Angular 1.x中所做的那样，这样我就可以让任何可能的routerLinks (或ngFor、ngIf等)正常工作？
换句话说，假设我从一个包含基于routerLink的链接的API中获得了一个内容。我如何编译该内容，以便当我将其插入到网站中时，它将具有正确的链接功能？
示例：
{
"title": "My post",
"content": "My link: <a [routerLink]=\"['about',
浏览 1提问于2017-02-08得票数 0
回答已采纳
我试图使路线工作，但得到了以下错误。我的目标是在页面加载上加载默认组件，然后当用户单击导航时，可以加载更多的路由。
首先，我试图加载默认路由器，但得到以下错误。现在，我将路由器链接和RouterOutlet都保存在app.component.ts中。
EXCEPTION: Error during instantiation of Router! (RouterLink -> Router).
ORIGINAL EXCEPTION: Component for route "/home" is not defined, or is not a class.
我的应用程序组
浏览 3提问于2016-04-04得票数 0
回答已采纳
我使用的是Angular Material 7.2.2版本，当我运行我的组件时，我在Chrome上一直收到以下错误。 ? 在下面的gist中，我的shared.module.ts中正确地导入了这些库。 受影响的HTML文件的代码如下。 <div fxLayout="column">
<mat-nav-list fxFlex fxLayout="column">
<mat-list-item *ngFor="let item of menuItems"
浏览 11提问于2019-03-12得票数 1
回答已采纳
我如何从一个组件路由到另一个路由器-出口的角度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
回答已采纳
我是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
1回答
尽管这在理论上不是特定于angular的，但它需要在ng app中解决，并且没有一个示例可以工作。我已经在SO中看到了所有的答案，但这些解决方案似乎都不适用于现实生活中的Angular7应用程序。例如，以下工作均未完成：
<!-- option 1 -->
<a class="nav-link" [routerLink]='["/properties", sessionId]'
(click)="$event.stopPropagation()">Properties
</a>
<!--
浏览 0提问于2019-06-12得票数 5
2回答
我有以下几点：
我收到一个错误，说：
compiler.es5.js:1690 Uncaught Error: Template parse errors:
Can't bind to 'routerLink' since it isn't a known property of 'a'. (" <div class="navbar-header">
<ul class="nav navbar-nav list-inline"&
浏览 0提问于2017-08-25得票数 0
我决定对Angular的测试特性进行实验。我已经有了一个应用程序，所以我只是运行了ng test，它立刻就出现了我不理解的错误。这是我第一次运行角度测试。
下面是输出：
AppComponent should create the app
Failed: Template parse errors:
Can't bind to 'routerLink' since it isn't a known property of 'button'. ("<mat-toolbar color="primary">
浏览 38提问于2018-07-26得票数 0
回答已采纳
我对angular 2 (RC1)路由器有严重的问题。
下面的代码可以工作：
<a [routerLink]="['/anythingEvenNotExistingRoute']"></a>
<router-outlet></router-outlet>
这不是：
//<a [routerLink]="['/anything']"></a> <-- without this line in html template
<router-outlet
浏览 2提问于2016-05-19得票数 4
这是路由配置：
const Route(path: '/kanji_list/:type/:value', name: 'List', component: KanjiList),
如果我在我的路由链接中只使用数字，Angular将会工作：
[routerLink]="['List', {type: 5, value: 3}]
但我想发送一个字符串作为参数，如下所示：
[routerLink]="['List', {type: "jlpt", value: 5}]
但它不起作用。可以发送一个字符串吗
浏览 0提问于2017-09-15得票数 0
我有如下标题组件的定义：
import { Component, OnChanges, Input } from '@angular/core';
@Component({
selector: 'app-section-header',
template:`
<div class="pageTitle">
<h1>{{name}}</h1>
<a class="editBtn" [routerLink]="routerLink">edi
浏览 1提问于2017-03-14得票数 1
回答已采纳
我的routerLinks在我的Angular2应用程序中工作。从我的主下拉菜单，当我点击链接，他们加载正确的URL和相应的正确的组件。但是，我在应用程序的另一部分中列出了相同的链接，由于某种原因，它们在应用程序中不起作用。我点击它们，什么都不会发生-没有URL更改，也没有加载组件。工作实例和非工作实例之间唯一的区别是，非工作实例包括附加到"ul“中的"li”项的链接。首先，我将列出正在工作的代码：
<div class="nav-menu-item indent"><a routerLink="about">About
浏览 1提问于2016-11-11得票数 0
回答已采纳
1回答
我正在构建一个带有angular4和bootstrap 3.3.7类的应用程序。我有一个清单：
<ul class="nav nav-sidebar">
<li><a [routerLink]="['/home']" [ngClass]="{'active': isActive(['home'])}">Overview </a></li>
<li><a [routerLink]="['/bu
浏览 0提问于2017-09-17得票数 0
我有一个角形6/ Ionic 4懒惰加载标签模板，正确工作。主页面有一个路由器出口，制表符有次要的路由器出口.但是，我无法在主菜单中创建显示选项卡页的routerLink。
只有在选项卡页上还没有运行时，此routerLink才能工作。例如：
测试页面上的If : /test
单击链接
正确链接到:选项卡/(关于:关于)
链接到选项卡页
如果已经在home选项卡上(并单击链接)，最终的url是：
/tabs/(about:about//home:home)
如何创建始终链接到以下内容的routerLink？
/tabs/(about:about)
我在这份打字稿中也有同样的
浏览 0提问于2018-07-07得票数 15
1回答
嘿，我有一个汉堡包菜单，很明显，点击时会得到一个is-active类，这个类会根据点击的不同而切换，我的问题是当我在主页上时，它会工作，然后我通过routerLink点击另一个页面，它会工作，但是当我点击第二个页面时，它会按编程删除类is-active，但是当我再次单击它时，它不会添加类is-active，但是如果我再次单击它，则会应用is-active .如果我从一个不在家的页面开始，我会点击汉堡包什么都不会发生，如果我再次点击它，is-active类就会被应用，我不知道这里发生了什么，如果有人知道这会有很大帮助
app.component.html
<router-outlet>
浏览 2提问于2017-12-20得票数 0
我已经用头撞了两天了。我试图在Angular2 beta0.0.2中实现一些简单的路由。请注意，我使用的是打字本。
因此，我理解的是，我需要用ROUTER_PROVIDERS引导我的根应用程序组件，这样这些服务就可以为我的who应用程序和提供，从而为那些想要实现路由到ROUTER_DIRECTIVES.的组件设置指令。
以下是我所拥有的：
//ANGULAR ******************************
import {provide, Component} from 'angular2/core';
import {bootstrap} from '
浏览 3提问于2016-02-04得票数 4
回答已采纳
3回答
我使用角2作为路由和节点托管本地。
当我使用“useAsDefault:true”作为我的路径时，导航栏链接不再工作，当我希望导航条链接到 (空白页)时，它将转到。
第一，我移除标志导航栏正确工作，我可以转到/home路由，但我转到空白页。
有人能解释一下为什么默认标志不能正常工作吗？
App.Component.ts
@RouteConfig([
{ path: '/home', name: 'Home', component: HomeComponent /*, useAsDefault : true */},
{ path: '/artic
浏览 1提问于2016-05-23得票数 2
我对Angular和使用Angular8是个新手。 当我为一个项目设置路线时，我很困惑如何使用 模板中的routerLink和.ts文件中的this.route.navigate()。 示例 // just routerLink
<div [routerLink]="/blog/32"></div>
// this.router.navigate()
// blog.html
<div (click)="moveToBlog(id)"></div>
// blog.ts
public moveToBlo
浏览 89提问于2020-04-20得票数 1
回答已采纳
我有一个组件，可以在页面加载后获取一些内容。内容有时包含超链接，我将其更改为将href属性替换为Angular [routerLink]。
我遇到的问题是，当它显示在页面上时，它不会被Angular编译，因此它只是无用的html。
我看了一下[innerHtml]，它可以处理普通的html，但它似乎不能编译[routerLink]。以下是我尝试测试的内容：
TS：
public addHtml() {
this.html = "<a [routerLink]=\"['Route']\">Route</a>";
}
浏览 1提问于2016-06-07得票数 0
路由在src/index.html angular中不起作用。 我的意思是我有一个标题和一些要导航的链接： <header>
<div class="logo">
<div class="logo-img-div">
<img src="../../assets/img/logo.png" alt="" class="logo-img" />
</div>
</di
浏览 7提问于2019-09-17得票数 4
回答已采纳
我正在构建一个Angular 7应用程序。在这个应用程序中，我得到了一组链接。当页面加载每个链接的getRouterURL时(每次我单击其中一个链接时，都会触发该方法。这是正确的行为吗？感觉像是在浪费内存吗？
<a [routerLink]="getRouterURL('normal')">Link</a>
<a [routerLink]="getRouterURL('normal')">Link 2</a>
<a [routerLink]="getRouterURL(
浏览 9提问于2019-03-28得票数 1
回答已采纳
我目前使用的是角路由器：
import {RouterModule, Routes, RouterLink} from '@angular/router';
假设我的标题是这样的：
<mat-menu #appMenu="matMenu">
<button routerLink="home" mat-menu-item>Home / Start</button>
<button routerLink="about" mat-menu-item>Instruction
浏览 3提问于2018-01-16得票数 1
8回答
我试图用http.get()在角2中加载一个本地json，我尝试了一些东西，这是我在堆栈中找到的。看起来是这样的：
这是我的app.module.ts，import HttpModule和JsonModule from @angular/http
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
impor
浏览 13提问于2017-05-18得票数 56
回答已采纳
1回答
历史(推状态)向前/向后按钮不工作的角2路由器，我已经测试了这一点在Chrome和火狐。前进按钮永远不会工作，向后按钮只工作2个步骤，而UI没有根据后向按钮做出响应。
我有如下代码。
app.component.ts
import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES, Routes } from '@angular/router';
import { CrisisListComponent } from './crisis-list.component';
浏览 1提问于2016-05-12得票数 4
回答已采纳
让我们来看看这个： <a mat-list-item routerLink="..." routerLinkActive="active-class">Link</a> 所以这里Angular允许嵌入"mat-list-item“作为<a>属性。 其他所有材料组件都有类似的语法吗？ 可以这样说： <mat-toolbar>
<header></header>
</mat-toolbar> 我可以这样做吗： <header mat-toolbar>&
浏览 17提问于2018-12-20得票数 1
回答已采纳
4回答
我的路由器链路从根组件开始工作，如果我将链接移动到子组件，相同的链路将无法工作。柱塞代码显示工作连杆和非工作连杆。提前谢谢你。下面是不起作用的链接。
//our root app component
import {Component} from '@angular/core'
@Component({
selector: 'my-menu',
template: `
<div>
<a routerLink="/comp11" routerLinkActive="active"&
浏览 1提问于2016-11-12得票数 12
回答已采纳
我是Angular的新手，正在关注教程。
我知道我试图在爬行之前运行，但我似乎无法弄清楚routerLink导入是如何工作的。我试着操纵这些路径，但都不起作用。
有人能给我解释一下我遗漏了什么吗？
我的目录结构是：
app
launcher
header
content (where routerOutlet is located)
welcome
about
projects
client
contact
footer
浏览 0提问于2018-11-08得票数 0
我有一个典型的带有链接列表的导航栏。
我试图通过创建一个简单的angular指令('authorize')来清理导航栏的HTML值，如下面的HTML代码片段所示，但要做到这一点，我需要我的指令能够接收列表中每个li项的routerLink属性值
这是我的导航栏html，在列表的顶层有'authorize‘属性。
<ul class="nav navbar-nav" authorize>
<li [routerLinkActive]="['active']">
<a [r
浏览 8提问于2018-04-13得票数 0
4回答
我用角度材料创建了一个工具栏。但是，它没有作出反应。如何使工具栏响应？
工具栏代码：
<md-toolbar color = "primary">
<button md-button class="md-primary" [routerLink]="['/basic']"><md-icon class = "icon-20">home</md-icon> Angular Concepts</button>
<but
浏览 8提问于2017-04-04得票数 26
回答已采纳
2回答
我正在使用Bootstrap Navbar作为我的web应用程序，它工作良好。使用此
这也是响应和我所需要的，但如你所知，引导肚脐改变为汉堡包图标时，屏幕尺寸缩小，并改变为一个下降。
就像这样
当我想要创建一个侧导航栏时，我的意思是它应该显示类似于物化CSS 中的元素。
我做了很多研究，得到了这个
但这里没有导航栏顶部，它只是一个侧肚脐，因为我想要这个功能，当屏幕大小缩小为移动。
此外，我的引导导航栏菜单有下降，所以我不知道如何处理在侧导航CSS。请帮助我是一个初学者在CSS。
我不能去物化CSS，因为使所有的引导更改物化的成本是很大的。
如果这是可能的使用简单的CSS，这就像
浏览 4提问于2017-08-12得票数 4
问题：在Angular2 Dart中设置Router & RouterLink的正确方法是什么？
main.dart
import 'package:angular2/angular2.dart';
import 'package:angular2/router.dart';
import 'package:angular2/src/reflection/reflection.dart' show reflector;
import 'package:angular2/src/reflection/reflection_capa
浏览 54提问于2015-05-18得票数 63
回答已采纳
2回答
我试图让路由和子路由在一个简单的配置中工作，但我似乎不能让它工作。
路由：
import { Routes, RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { BookingoverviewComponent } from './bookingoverview/bookingoverview.component';
import { BookingDetailsComponent } from './booki
浏览 8提问于2017-08-29得票数 3
回答已采纳
很抱歉再提一个问题。我正在使用Angular 7，并且正在尝试使用Router Link。
这是我的app-routing-module
const routes: Routes = [
{ path: 'locations' , component : LocationManagerComponent },
{ path: 'locations/create' , component : CreateEditLocationComponent },
{ path: 'locations/create/:id'
浏览 0提问于2019-07-10得票数 0
我有两个简单的页面，我将在angular2中使用路由。但看起来我得到了以下例外：
异常:在路由器实例化过程中出错！(RouterLink ->路由器)。
原始例外:路由配置应该包含一个“组件”、“加载程序”或"redirectTo“属性。
这是文件
页面1.ts
import {Component} from 'angular2/core';
@Component({
selector: "page1",
template: `page 1 goes here.`
})
export class Page1Cmp{}
页
浏览 0提问于2016-03-22得票数 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
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
