Как использовать панель инструментов material2, кнопку и роутер angular-cli

У меня есть следующие файлы:

.html

<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() {
  }
}

Мой маршрутизатор действительно работает с приведенным выше кодом.

However, I am trying the
<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>

нажимается.

Я пробовал следующее, но это не работает.

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

Оцените любую помощь, оказанную, пожалуйста, и спасибо.


person st_clair_clarke    schedule 27.05.2016    source источник


Ответы (1)


Ваша проблема в том, что новый маршрутизатор не принимает [routerLink] для <button> элементов, а только <a> тегов.

Но вам повезло, Material позволяет сделать иконку на <a> и <button>.

Документация по материалам на md-кнопке

Итак, попробуйте следующее:

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