加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

如何使用material2工具栏,按钮和angular-cli路由器

发布时间:2020-12-17 17:35:15 所属栏目:安全 来源:网络整理
导读:我有以下文件: 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 { Com
我有以下文件:

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

我的路由器实际上使用上面的代码.

但是,我正在尝试

<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>

感谢您给予的任何帮助,谢谢.

解决方法

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

但是你很幸运,Material让你在< a>上做图标.和< button>

Material Docs on md-button

试试这个:

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读