如何使用material2工具栏，按钮和angular-cli路由器 [英] How to use material2 toolbar, button and angular-cli router

问题描述

我有以下文件:

<nav>
  <md-toolbar color = "primary">
    <a [routerLink] = "['new-patient']">New Patient</a>

    <button md-icon-button
            color = "accent">
      <md-icon class = "material-icons md-24">person_add</md-icon>
    </button>
  </md-toolbar>
</nav>

.ts

import { Component, OnInit } from '@angular/core';
import { ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router';
import { MdToolbar } from '@angular2-material/toolbar';
import { MdIcon, MdIconRegistry } from '@angular2-material/icon';
import { MdButton } from '@angular2-material/button';

@Component({
  moduleId: module.id,
  selector: 'epimss-toolbar',
  templateUrl: 'toolbar.component.html',
  styleUrls: ['toolbar.component.css'],
  providers: [MdIconRegistry],
 directives: [MdButton, MdIcon, MdToolbar, ROUTER_DIRECTIVES],
})
export class ToolbarComponent implements OnInit {

  constructor() {}

  ngOnInit() {
  }
}

我的路由器实际上可以使用上述代码.

My router actually works with the above code.

<a [routerLink] = "['new-patient']">New Patient</a>

成为在

<button md-icon-button
        color = "accent">
  <md-icon class = "material-icons md-24">person_add</md-icon>
</button>

点击

.

我尝试了以下方法，但是它不起作用.

I have tried the following but it does not work.

<button md-icon-button
        color = "accent"
        [routerLink] = "['new-patient']">
  <md-icon class = "material-icons md-24">person_add</md-icon>
</button>

感谢您提供的任何帮助，谢谢.

Appreciate any help given please, and thanks.

推荐答案

您的问题是因为新路由器不接受<button>元素上的[routerLink]，仅接受<a>标记.

Your issue is because the new Router doesn't accept [routerLink] on <button> elements, only <a> tags.

但是您很幸运，Material让您可以在<a>和<button>

But you're in luck, Material lets you do the icon on <a> and <button>

md按钮上的材质文档

所以尝试一下:

<a md-icon-button
        [routerLink] = "['new-patient']"
        color = "accent">
  <md-icon class = "material-icons md-24">person_add</md-icon>
</a>

这篇关于如何使用material2工具栏，按钮和angular-cli路由器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！