Question

routerLink指令在Material 2的md-toolbar组件中无效。

toolbar.component.html：

<md-toolbar color="primary">
  <a routerLink="/email-login" routerLinkActive="active"> Email </a>
</md-toolbar>

我有一个包含所有路线的路线模块：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

// Application Pages;
/* Public Pages */
import { EmailLoginPage } from './pages/public/email-login.page';
import { LinkedinLoginPage } from './pages/public/linkedin-login.page';
/* Private Parent Page */
import { Dashboard } from './pages/authenticated/dashboard';
/* Private Pages */
import { RecordsPage } from './pages/authenticated/records.page';

const routes: Routes = [
  { path: 'email-login', component: EmailLoginPage },
  { path: 'linkedin-login', component: LinkedinLoginPage },
  {
    path: 'dashboard',
    component: Dashboard,
    canActivate: [],
    children: [
      { path: 'records', component: RecordsPage },
      { path: '', component: RecordsPage }
    ]
  },
  {
    path: '',
    redirectTo: '/email-login',
    pathMatch: 'full'
  }
];

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

export class RoutingModule {}

这是否与链接设置为Material Directive的子元素这一事实有关？如果是这样，最好的方法是什么？

感谢。

Answer 1

示例：

  <md-menu #menu="mdMenu"> 
  <button md-menu-item [routerLink] ="['/Settings']">
  <md-icon>voicemail</md-icon>
          <span> Settings </span>
   </button>
 </md-menu>

希望你正确设置路线。

Answer 2

尝试删除前导斜杠？

<md-toolbar color="primary">
  <a routerLink="email-login" routerLinkActive="active"> Email </a>
</md-toolbar>

并确保您正在处理.module文件中的组件。

Angular 2 routerlink无法在Material 2工具栏中单击

2 个答案: