问题标签 [angular-material2]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
1495 浏览

twitter-bootstrap - Angular 2 材质:MdCard 的高度相同

我正在使用 Angular2、Material2 和 Bootstrap。布局基本是

所有卡片都有不同的内容,因此不同的高度。

我怎样才能使它们具有相同的高度?(flexboxes..但是如何?)

普朗克

注意:我将 Bootstrap 用于响应式网格,因为 Material2 仍然没有它的布局系统。任何可靠的网格系统都适合我。

0 投票
3 回答
4112 浏览

css - 在 Angular Material 2 中使用带有 md-icon 的材质图标

我无法让 md-icon 显示来自 Google Material 的图标。对于那些不需要太多说明的人来说,这里是代码,更多的细节在代码之后。

app.component(我显示所有主要组件的地方,实际的 md-icon 在 header.component 中):

标头组件(我尝试调用 md-icon):

这是根据谷歌材料网站上使用其图标的步骤的css和html:

CSS:

HTML:

最初我没有收到任何错误,它只是将 md-icon 以纯文本形式呈现为“home”。但是我认为我错过了 MdIcon 的指令,所以我插入了它,现在我收到了这个错误“没有 MdIconRegistry 的提供者!”。他们在他们的文档中谈到了 MdIconRegistry,但从我阅读它的方式来看,如果您不想使用我确实想使用的标准谷歌图标,您只需要这样做。所以基本上我导入了组件,包含指令,在我的索引中添加了链接,并将 css 代码添加到我的样式表中。从我读过的内容来看,它应该可以工作,但我显然遗漏了一些东西。

任何帮助将不胜感激,如果有人对与实际问题无关的代码有任何批评,请随时告诉我,我对 Angular 2 非常陌生,我可以使用我能得到的所有建议。

提前致谢。

0 投票
1 回答
4160 浏览

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

我有以下文件:

.html

.ts

我的路由器实际上可以使用上面的代码。

但是,我正在尝试

成为一个路由,当

被点击。

我尝试了以下方法,但它不起作用。

感谢您提供的任何帮助,谢谢。

0 投票
1 回答
498 浏览

angular - Angular2 Material2如何设置元素样式

我很好奇为什么我的一些 scss 不能正确使用 angular-material2 元素。我正在使用 node-sass 编译我的 scss,但它似乎没有正确影响 css 文件。例如,我正在使用具有以下功能的 material2 演示应用程序:

(我添加了背景颜色)。这是设置元素样式的正确方法还是我应该只使用类。当我只添加了一个具有所需背景颜色的类时,它被默认元素样式覆盖。

0 投票
0 回答
292 浏览

css - Material 2 sidenav 不加载css文件

我正在使用角度cli和角度材料2。按钮和工具栏获得正确的设计颜色,但是当我想实现sidenav时,按钮单击将添加一个.mdsidenav-opening类,但没有css规则。

0 投票
3 回答
1364 浏览

angular - Angular2 应用程序中的 Material Design Lite (MDL) VS Angular2 Material

YouTube 和其他学习网站上有一些 Angular2 教程,其中一些使用了Material Design Lite (MDL),一些使用了新的Angular2 Material进行演示。

考虑到 Angular2 Material 仍然很新(目前处于 Alpha 阶段),并且与 MDL 相比,组件和文档的数量有限,目前在 Angular2 中实现这将是一个更好的选择,并且优缺点是什么每个特定于 Angular2 ?

0 投票
1 回答
1136 浏览

javascript - Angular Material 2 - 未在整页中呈现

我正在为我的 Angular 2 应用程序使用Angular Material 2。我的仪表板页面未在浏览器中呈现整页。附上上述问题的截图。

AppComponent - 模板文件:

DashboardComponent - 模板文件:

仪表板组件.ts:

我在这里错过了什么吗?

请参考: 我的半页渲染仪表板页面截图

感谢你的帮助。

0 投票
2 回答
589 浏览

angular - 使用 Angular 2 Material 2 Alpha 5 和 Angular 2 RC 2

几天前,我开始探索最近发布的 Angular 2 RC 2,并尝试将我的应用程序从 Angular 2 RC 1 迁移到 Angular 1 RC 2。

我在我的应用程序中使用 Angular 2 Material 2 Alpha 5。

虽然迁移并没有花费太多时间,但当我编译并运行该应用程序时,我发现使用 Angular 2 材料 2 组件的表单已损坏。

材质表单控件不适用于 Angular 2 RC 2,控制台显示以下错误:

我在 上对其进行了测试md-inputmd-slide-toggle并且md-checkbox我在所有这些上都收到了以下异常。

0 投票
1 回答
56 浏览

webpack - 为什么我没有使用 Angular2-Material 和 Webpack 从 Google 字体网站获取样式

所以我有 2 个项目,一个在gulp上工作。现在我正在尝试将其移植到在这个项目中使用 webpack 。

问题是我似乎无法包含 ngMaterial 图标。当我检查样式时,它看起来像是在获取 Angular2 Material 样式...

(左边是成功的 gulp 项目,右边是失败的基于 Webpack 的项目)

在此处输入图像描述

有人能看到我错过了什么吗?

0 投票
2 回答
1175 浏览

angular - 在组件中访问 Angular2 Material sidenav

我想访问 *.component.html 中定义的 sidenav,这样我就可以动态控制其基于模式(通过 | push | side)的属性,例如屏幕宽度。

如何访问下面的 md-sidenav

来自它在 *.component.ts 中定义的组件?

我现在在