Question

我有一个navbar组件作为sideNav工作。为了扩展它，我需要点击一个标记为＆＃34; href =＆＃34;＃＆＃34;＆＃34;的链接。像上面的例子：

<nav>
  <ul id="slide-out" class="side-nav">
      <li>
        <div class="user-view teal lighten-2">
          <a href="#!user"><img class="circle" src="images/yuna.jpg"></a>
          <a href="#!name"><span class="white-text name">John Doe</span></a>
          <a href="#!email"><span class="white-text email">jdandturk@gmail.com</span></a>
        </div>
      </li>
      <li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
      <li><a href="#!">Second Link</a></li>
      <li><div class="divider"></div></li>
      <li><a class="subheader">Subheader</a></li>
      <li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
    </ul>
    <a materialize="sideNav" href="#" data-activates="slide-out" class="button-collapse show-on-large"><i class="material-icons">menu</i></a>     
</nav>

代码工作正常，但是当我实现路由模块时，系统正试图导航到这条路线，我想。这个链路的最佳解决方案是什么继续使用路由模块？

路由模块是这样的：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { NaoAutorizadoComponent } from './core/nao-autorizado.component';
import { PaginaNaoEncontradaComponent } from './core/pagina-nao-encontrada.component';

const routes: Routes = [
  { path: '', redirectTo: 'inicial', pathMatch: 'full' },
  { path: 'nao-autorizado', component: NaoAutorizadoComponent },
  { path: 'pagina-nao-encontrada', component: PaginaNaoEncontradaComponent },
  { path: '**', redirectTo: 'pagina-nao-encontrada' }
];

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

在这种情况下，当我尝试点击链接href =＆＃34;＃＆＃34;时，系统会重定向到＆＃34; pagina-nao-encontrada＆＃34;，这意味着，＆＃34;找不到页面＆＃34;

Answer 1

问题与路由模块无关，但我没有导入NavbarComponent中的MaterializeModule，现在它运行良好。

如何使用href =＆＃34;＃＆＃34;路由模块Angular2 +？

1 个答案: