Question

My Angular项目结构如下：
Index.html包含<app-root></app-root>，这是我的app.component 我的应用程序组件具有以下结构：

<md-toolbar>
  <ng-template #notLoggedIn>
    <a md-icon-button [md-menu-trigger-for]="topnavUserMenu">
      <md-icon>person_add</md-icon>
    </a>
    <md-menu #topnavUserMenu="mdMenu">
      <button md-menu-item>
        <md-icon>fingerprint</md-icon>
        <span><a [routerLink]="['/login']" routerLinkActive="active">Login</a></span></button>
      <button md-menu-item>
        <md-icon>mode_edit</md-icon>
        <span><a [routerLink]="['/signup']">Register</a></span></button>
    </md-menu>
  </ng-template>
</md-toolbar>
<md-sidenav-container>
  <router-outlet></router-outlet>
</md-sidenav-container>

基本上，app.component在整个应用中都是持久的，所有内容都是通过router-outlet呈现的。如果用户从工具栏菜单中选择“登录”，则所需的行为是应用程序重定向到URL，但是，当用户单击该链接时，没有任何反应。

为什么会这样？我该如何解决？

注意：我知道我可以通过向我的app.component添加导航功能并将其绑定到按钮的单击来实用，这样做，例如：

test() {
    this.router.navigate(['/login']);
  }

我更感兴趣的是它为何不能与HTML指令一起使用，但它与JS完美配合。

Answer 1

对于那些新手并且会发现这些信息有用的人来说，@ birwin的说法是正确的 - 锚点标签在按钮中是非法的。你需要改变：

<button md-menu-item>
        <md-icon>mode_edit</md-icon>
        <span><a [routerLink]="['/signup']">Register</a></span>
</button>

为：

<button md-menu-item [routerLink]="['/signup']">
        <md-icon>mode_edit</md-icon>
        <span>Register</span>
</button>

为什么我的路由器没有重定向？

1 个答案: