blocks|key|4400758|text|像这样使用它来获取mroe信息请阅读此topic|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4400759|<a+[routerLink]="['/about']">About+this</a>|code-block|syntax|javascript|4400760|entityMap|0|LINK|mutability|MUTABLE|url|https://angular.io/docs/ts/latest/guide/router.html^0|J|5|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

use it like this for mroe info read this <a href="https://angular.io/docs/ts/latest/guide/router.html" rel="noreferrer">topic</a>

<pre><code>&lt;a [routerLink]="['/about']"&gt;About this&lt;/a&gt;
</code></pre>

blocks|key|4400784|text|链接是错误的，你必须这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4400785|<ul+class="nav+navbar-nav+item">
++++<li>
++++++++<a+[routerLink]="['/home']"+routerLinkActive="active">Home</a>
++++</li>
++++<li>
++++++++<a+[routerLink]="['/about']"+routerLinkActive="active">About+this
++++++++</a>
++++</li>
</ul>|code-block|syntax|javascript|4400786|您可以阅读此tutorial|offset|length|4400787|entityMap|0|LINK|mutability|MUTABLE|url|https://angular.io/docs/ts/latest/tutorial/toh-pt5.html^0|0|0|6|8|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

The links are wrong, you have to do this:

<pre><code>&lt;ul class="nav navbar-nav item"&gt;
 &lt;li&gt;
 &lt;a [routerLink]="['/home']" routerLinkActive="active"&gt;Home&lt;/a&gt;
 &lt;/li&gt;
 &lt;li&gt;
 &lt;a [routerLink]="['/about']" routerLinkActive="active"&gt;About this
 &lt;/a&gt;
 &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

You can read this <a href="https://angular.io/docs/ts/latest/tutorial/toh-pt5.html" rel="nofollow">tutorial</a>

blocks|key|4401108|text|您在那里显示的代码是绝对正确的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4401109|我怀疑您的问题是没有将RouterModule+(声明RouterLink的位置)导入到使用此模板的模块中。|4401110|我遇到了类似的问题，它花了我一些时间来解决，因为文档中没有提到这一步。|4401111|因此，转到使用此模板声明组件的模块，并添加：|4401112|import+{+RouterModule+}+from+'@angular/router';|code-block|syntax|javascript|4401113|然后将其添加到您的模块导入中，例如|4401114|@NgModule({
++imports:+[
++++CommonModule,
++++RouterModule
++],
++declarations:+[MyTemplatesComponent]
})
export+class+MyTemplatesModule+{+}|4401115|除了具有正确的导入语句之外，您还需要在<router-outlet></router-outlet>元素中为该routerLink提供一个显示位置，以便还需要将其放置在您的HTML标记中的某个位置，以便路由器知道在何处显示该数据。|offset|length|style|CODE|4401116|entityMap^0|0|0|0|0|0|0|0|J|V|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|11|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|12|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|14|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|15|8|@$S|16|T|17|U|V]]|9|@]|A|$]]|$1|W|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|X|$]]

The code you are showing there is absolutely correct. 

I suspect that your problem is that you are not importing RouterModule (which is where RouterLink is declared) into the module which uses this template.

I had a similar problem and it took me some time to solve as this step is not mentioned in the documentation.

So go to the module that declares the component with this template and add:

<pre><code>import { RouterModule } from '@angular/router';
</code></pre>

then add it to your modules imports e.g.

<pre><code>@NgModule({
 imports: [
 CommonModule,
 RouterModule
 ],
 declarations: [MyTemplatesComponent]
})
export class MyTemplatesModule { }
</code></pre>

Along with having the correct import statements, you'll also need a place for that routerLink to be shown, which is in the <code>&lt;router-outlet&gt;&lt;/router-outlet&gt;</code> element, so that also needs to be placed somewhere in your HTML markup so the router knows where to display that data.

blocks|key|4400884|text|尝试更改链接，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4400885|++<ul+class="nav+navbar-nav+item">
++++<li>
++++++++<a+[routerLink]="['/home']"+routerLinkActive="active">Home</a>
++++</li>
++++<li>
++++++++<a+[routerLink]="['/about']"+routerLinkActive="active">About+this</a>
++++</li>
++</ul>|code-block|syntax|javascript|4400886|另外，在index.html的header中添加以下内容：|4400887|<base+href="/">|offset|length|style|CODE|4400888|entityMap^0|0|0|0|0|F|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|T|8|@$K|U|L|V|M|N]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

Try changing the links as below:

<pre><code> &lt;ul class="nav navbar-nav item"&gt;
 &lt;li&gt;
 &lt;a [routerLink]="['/home']" routerLinkActive="active"&gt;Home&lt;/a&gt;
 &lt;/li&gt;
 &lt;li&gt;
 &lt;a [routerLink]="['/about']" routerLinkActive="active"&gt;About this&lt;/a&gt;
 &lt;/li&gt;
 &lt;/ul&gt;
</code></pre>

Also, add the following in the header of index.html:

<code>&lt;base href="/"&gt;</code>

blocks|key|4400920|text|别忘了在你的模板中添加以下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4400921|<router-outlet></router-outlet>|code-block|syntax|javascript|4400922|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

don't forget this to add this below in your template:

<pre><code>&lt;router-outlet&gt;&lt;/router-outlet&gt;
</code></pre>

blocks|key|4400962|text|我知道这个问题现在已经相当陈旧了，你现在很可能已经解决了它，但我想在这里发帖，作为任何找到这篇文章的人的参考，同时解决这个问题是，如果你的锚定标签在Index.html中，这种事情就不会起作用。它需要在其中一个组件中|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4400963|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

I'm aware this question is fairly old by now, and you've most likely fixed it by now, but I'd like to post here as reference for anyone that finds this post while troubleshooting this issue is that this sort of thing won't work if your Anchor tags are in the Index.html. It needs to be in one of the components

blocks|key|4401252|text|还有另一种情况适合这种情况。如果在你的拦截器中，你让它返回非布尔值，那么最终的结果是这样的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4401253|例如，我曾试图返回obj+&&+obj[key]内容。经过一段时间的调试后，我意识到我必须手动将其转换为布尔类型，如Boolean(obj+&&+obj[key])，以便让点击通过。|offset|length|style|CODE|4401254|entityMap^0|0|9|F|1M|O|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]|$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|I|$]]

There is also another case which suits this situation. If in your interceptor, you made it return non Boolean value, the end result is like that.

For example, I had tried to return <code>obj &amp;&amp; obj[key]</code> stuff. After debugging for a while, then I realize I have to convert this to Boolean type manually like <code>Boolean(obj &amp;&amp; obj[key])</code> in order to let the clicking pass.

blocks|key|4401054|text|因为我的眼睛不是很锐利，我用href代替了routerLink，花了我几次搜索才弄明白#facepalm。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4401055|entityMap^0|E|4|L|A|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

For not very sharp eyes like mine, I had <code>href</code> instead of <code>routerLink</code>, took me a few searches to figure that out #facepalm.

blocks|key|4401091|text|大多数情况下，问题是拼写错误|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4401092|<a+[routerLink]="['/home']"+routerLinkActive="active">Home</a>|code-block|syntax|javascript|4401093|只需再次检查拼写即可。|4401094|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Most of the time problem is a spelling mistake in
<pre class="lang-html prettyprint-override"><code>&lt;a [routerLink]=&quot;['/home']&quot; routerLinkActive=&quot;active&quot;&gt;Home&lt;/a&gt;
</code></pre>
Just check again for spelling.

blocks|key|4401384|text|如果您将导航栏放在一个组件中，并且在样式表中声明了您的样式是活动的，那么它将不起作用。在我的例子中，这就是问题所在。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4401385|我的导航栏中使用angular材质的项目是：|4401386|<div+class="nav-item">
++++++++<a+routerLink="/test"+routerLinkActive="active">
++++++++++<mat-icon>monetization_on</mat-icon>My+link
++++++++</a>
<mat-divider+class="nav-divider"+[vertical]="true"></mat-divider>|code-block|syntax|javascript|4401387|因此，我将样式放在根目录的style.scss中|4401388|a.active+{
++color:+white+!important;
++mat-icon+{
++++color:+white+!important;
++}
}|4401389|如果其他解决方案没有帮助你，我希望它能帮到你。|4401390|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

If you have your navbar inside a component and you declared your style active in that stylesheet, it won't work. In my case this was the problem.
my item of my navbar using angular material was:
<pre><code>&lt;div class=&quot;nav-item&quot;&gt;
 &lt;a routerLink=&quot;/test&quot; routerLinkActive=&quot;active&quot;&gt;
 &lt;mat-icon&gt;monetization_on&lt;/mat-icon&gt;My link
 &lt;/a&gt;
&lt;mat-divider class=&quot;nav-divider&quot; [vertical]=&quot;true&quot;&gt;&lt;/mat-divider&gt;
</code></pre>
so I put the style active in my style.scss in the root
<pre><code>a.active {
 color: white !important;
 mat-icon {
 color: white !important;
 }
}
</code></pre>
I hope it helps you if the other solutions didn't.

blocks|key|4401433|text|在我的例子中，我在VS代码中使用了换行器，显然，属于routerLink的结束引号和next属性之间没有空格。Line-wrapper将这段代码分成两行，因此没有注意到缺少空格。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4401434|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

In my case I had line-wrapper in my VS code and, apparently, there was no space between end of closing quote belonging to [routerLink] and next attribute. Line-wrapper split this in two lines so missing space went unnoticed.

blocks|key|4401467|text|我能够解决我的问题，我将我的导航链接从一个索引页面移动到另一个组件(实际上我已经在index.html中添加了模板)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4401468|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

I was able to solve my problem my moving my navigation links from Index page to component (I actually had added template in index.html)

My routing in the angular2 apps works well. But I am going to make some routeLink based on <a href="https://angular.io/docs/ts/latest/guide/router.html" rel="noreferrer">this</a>:
Here is my routing:
<pre class="lang-ts prettyprint-override"><code>const routes: RouterConfig = [
 { path:'home' , component: FormComponent },
 { path:'about', component: AboutComponent },
 { path:'**' , component: FormComponent }
];
</code></pre>
And here are the links that I made:
<pre class="lang-html prettyprint-override"><code>&lt;ul class=&quot;nav navbar-nav item&quot;&gt;
 &lt;li&gt;
 &lt;a routerLink='/home' routerLinkActive=&quot;active&quot;&gt;Home&lt;/a&gt;
 &lt;/li&gt;
 &lt;li&gt;
 &lt;a routerLink='/about' routerLinkActive=&quot;active&quot;&gt;About this&lt;/a&gt;
 &lt;/li&gt;
&lt;/ul&gt;
</code></pre>
I expect that, when I click on them it navigates to the corresponding component, but they do not perform anything?

Angular routerLink does not navigate to the corresponding component

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我在angular2应用程序中的路由工作得很好。但是我要做一些基于的routeLink下面是我的路由：const routes: RouterConfig = [    { path:'home' , component: FormComponent  },    { path:'about', component: ...

问Angular routerLink不会导航到相应的组件
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angular routerLink不会导航到相应的组件EN