简体   繁体   English

Angular routerLink 没有导航到相应的组件

[英]Angular routerLink does not navigate to the corresponding component

My routing in the angular2 apps works well.我在 angular2 应用程序中的路由运行良好。 But I am going to make some routeLink based on this :但我将基于制作一些 routeLink :

Here is my routing:这是我的路线:

const routes: RouterConfig = [
    { path:'home' , component: FormComponent  },
    { path:'about', component: AboutComponent },
    { path:'**'   , component: FormComponent  }
];

And here are the links that I made:这是我制作的链接:

<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>

I expect that, when I click on them it navigates to the corresponding component, but they do not perform anything?我希望,当我点击它们时,它会导航到相应的组件,但它们不执行任何操作?

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.我怀疑您的问题是您没有将 RouterModule (这是 RouterLink 声明的地方)导入使用此模板的模块。

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:因此,转到使用此模板声明组件的模块并添加:

import { RouterModule } from '@angular/router';

then add it to your modules imports eg然后将其添加到您的模块导入中,例如

@NgModule({
  imports: [
    CommonModule,
    RouterModule
  ],
  declarations: [MyTemplatesComponent]
})
export class MyTemplatesModule { }

Along with having the correct import statements, you'll also need a place for that routerLink to be shown, which is in the <router-outlet></router-outlet> element, so that also needs to be placed somewhere in your HTML markup so the router knows where to display that data.除了拥有正确的导入语句外,您还需要在<router-outlet></router-outlet>元素中显示该 routerLink 的位置,因此也需要将其放置在 HTML 中的某个位置标记,以便路由器知道在哪里显示该数据。

不要忘记在您的模板中添加以下内容:

<router-outlet></router-outlet>

Try changing the links as below:尝试更改链接如下:

  <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>

Also, add the following in the header of index.html:另外,在 index.html 的标题中添加以下内容:

<base href="/">

像这样使用 mroe 信息阅读这个主题

<a [routerLink]="['/about']">About this</a>

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.我知道这个问题现在已经很老了,你现在很可能已经解决了它,但我想在这里发布作为任何人在解决这个问题时找到这篇文章的参考是这种事情赢了如果您的 Anchor 标签在 Index.html 中,则不起作用。 It needs to be in one of the components它需要在其中一个组件中

For anyone having this error after spliting modules check your routes, the following happened to me:对于在拆分模块后遇到此错误的任何人检查您的路线,以下情况发生在我身上:

public-routing.module.ts:公共路由.module.ts:

const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: '**', redirectTo: 'home' } // ← This was my mistake
    { path: 'home', component: HomeComponent },
    { path: 'privacy-policy', component: PrivacyPolicyComponent },
    { path: 'credits', component: CreditsComponent },
    { path: 'contact', component: ContactComponent },
    { path: 'news', component: NewsComponent },
    { path: 'presentation', component: PresentationComponent }
]

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class PublicRoutingModule { }

app-routing.module.ts: app-routing.module.ts:

const routes: Routes = [
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

Move { path: '**', redirectTo: 'home' } to your AppRoutingModule:{ path: '**', redirectTo: 'home' }到您的 AppRoutingModule:

public-routing.module.ts:公共路由.module.ts:

const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'home', component: HomeComponent },
    { path: 'privacy-policy', component: PrivacyPolicyComponent },
    { path: 'credits', component: CreditsComponent },
    { path: 'contact', component: ContactComponent },
    { path: 'news', component: NewsComponent },
    { path: 'presentation', component: PresentationComponent }
]

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class PublicRoutingModule { }

app-routing.module.ts: app-routing.module.ts:

const routes: Routes = [
    { path: '**', redirectTo: 'home' }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

The links are wrong, you have to do this:链接错了,你必须这样做:

<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>

You can read this tutorial您可以阅读本教程

我使用的是 routerlink 而不是routerLink

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 obj && obj[key] stuff.例如,我曾尝试返回obj && obj[key]东西。 After debugging for a while, then I realize I have to convert this to Boolean type manually like Boolean(obj && obj[key]) in order to let the clicking pass.调试了一段时间后,我意识到我必须像Boolean(obj && obj[key])这样手动将其转换为布尔类型才能让点击通过。

Following the working sample , I have figured out solution for the case of pure component:按照工作示例,我已经找到了纯组件情况的解决方案:

  1. Declare component at app level 在应用程序级别声明组件
  2. Do not init in component不要在组件中初始化

对于像我这样不太敏锐的眼睛,我使用href而不是routerLink ,花了我几次搜索来弄清楚#facepalm。

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:我使用角材料的导航栏项目是:

<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>

so I put the style active in my style.scss in the root所以我将样式放在我的 style.scss 中的根目录中

a.active {
  color: white !important;
  mat-icon {
    color: white !important;
  }
}

I hope it helps you if the other solutions didn't.如果其他解决方案没有,我希望它可以帮助您。

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.就我而言,我的 VS 代码中有换行符,显然,属于 [routerLink] 的结束引号和下一个属性之间没有空格。 Line-wrapper split this in two lines so missing space went unnoticed. Line-wrapper 把它分成两行,所以没有注意到缺少的空间。

Most of the time problem is a spelling mistake in大多数时候问题是拼写错误

<a [routerLink]="['/home']" routerLinkActive="active">Home</a>

Just check again for spelling.只需再次检查拼写。

我能够解决我的问题,我将导航链接从索引页面移动到组件(我实际上在 index.html 中添加了模板)

Incase you're following https://angular.io/start/start-routing tutorial while using https://stackblitz.com/ as online IDE, opening/refreshing it in an new window fixed it. Incase you're following https://angular.io/start/start-routing tutorial while using https://stackblitz.com/ as online IDE, opening/refreshing it in an new window fixed it.

Try adding the components you have created in the declarations array in the ' app.module.ts ' or the respective module file so that your module knows that you have created these components.尝试在“ app.module.ts ”或相应模块文件的声明数组中添加您创建的组件,以便您的模块知道您已经创建了这些组件。 Also don't forget to import CommonModule and RouterModule.也不要忘记导入 CommonModule 和 RouterModule。

import {AboutComponent} from './about.component';
import {FormComponent} from './form.component';

@NgModule({
  imports: [
    CommonModule,
    RouterModule
  ],
  declarations: [FormComponent, AboutComponent]
})
export class MyTemplatesModule { }

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Angular 路由器 - 使用 [routerLink] 在组件上导航 - Angular router - use [routerLink] to navigate on component 浏览器中的网址将不会导航到相应的routerlink - Url in browser will not navigate to corresponding routerlink angular routerLink 在带有模块的组件中不起作用 - angular routerLink does not work in component with module RouterLink 不会在单击时导航到组件,而是在加载同一模块中的其他组件后导航 - RouterLink does not navigate to a component on click but navigates after loading other component in same module Angular RouterLink 相对路径在具有空路径的组件中不起作用 - Angular RouterLink relative path does not work in component having empty path Angular routerLink和Router.Navigate行为不同 - Angular routerLink and Router.Navigate behaving differently Angular 2中的导航功能和routerLink有什么区别? - What is the difference between the navigate function and routerLink in Angular 2? 如何使用 Angular RouterLink 导航到路由器出口? - How to navigate to Router outlet using Angular RouterLink? Angular 4 routerLink加载错误的组件 - Angular 4 routerLink loading wrong component Angular 6导航栏routerlink重新加载组件 - Angular 6 navbar routerlink reload component
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM