Question

是否有任何选项可以将Angular材质与新的Angular 4一起使用？

官方material.angularjs.org说：

Angular Material最近发布了第1版，我们认为它是稳定的并且可以用于生产。开发人员应注意Angular Material v1仅适用于Angular 1.x。

关于Angular 2：

Angular Material v2开发也在angular/material2 GitHub存储库
中进行

Angular 4怎么样？你认为我们可以在一个项目中以某种方式绑定Angular 1.x和Angular 4来带来Angular 4的新功能并继续使用令人敬畏的Angular Material框架吗？

Answer 1

您可以参考here中的使用入门指南。此文档已更新，以支持 angular v4.0.0

某些Material组件依赖于 Angular动画模块，以便能够执行更高级的转换。如果您希望这些动画在您的应用中运行，则必须安装@angular/animations模块，并在BrowserAnimationsModule的应用中加入@angular/platform-browser/animations。

Answer 2

2016年12月，当Angular团队跑来跑去告诉大家停止说'＃34; Angular 2＆＃34;并且只是说＆＃34; Angular＆＃34;，我有点认为这是愚蠢的营销。

然而，在阅读本网站上的问题时，我开始看到他们的请求是合理的。 Angular 1.x到Angular 2代表了一个完全重写，一个完全重新构建的框架，几乎打破了一切。除此之外是切换到semver，这意味着新的主要版本号将会更快地出现。

简而言之，我认为他们试图阻止的是＃Angular 4对Angular 2的思考，因为Angular 2是Angular 1＆＃34;，这绝对不是真的。

这种感知问题也导致他们代码名称4.0＆＃34;隐形改造＆＃34;。

因此，当您看到为Angular2设计的软件包时，其中大多数软件包也可能适用于Angular 4.如果有破坏这些软件包的ng4更改，您将快速查看版本以解决这些问题......或者您是否有关于该软件包是否维护得足以在项目中使用的答案。

Answer 3

我也在使用Angular 4.0.0和CLI 1.0.0，它运行正常。只是说上面提到的无格式复选框之类的奇怪行为是因为主题组件是强制性的。您可以使用预先构建的角度材质主题或生成自己的主题。只需在index.html中包含样式表，您就会看到魔力。

有关角度材料主题的更多信息，请访问：https://material.angular.io/guide/theming

Answer 4

我刚刚开始使用angular 4.0.0（使用angular cli 1.0.0），并试图将它与材质2.0.0-beta2一起使用。除了UI中的一些错误外，它的工作正常：

材料复选框看起来很糟糕，它内置了原生复选框（Screenshot）

如果遇到不稳定的情况，我会更新这篇文章。您现在似乎可以尝试https://github.com/mseemann/angular2-mdl。

Answer 5

您可以从angular-quickstart下载或分叉here样板在这个项目中有角度材料2.0.0-beta.6和角4.0.0的最新稳定支持。找到最新版本的正确设置非常困难。

Answer 6

执行此操作：

npm install --save @angular/animations

import {BrowserAnimationsModule} from '@angular/platform-browser';

 //in app.module.ts
@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...
})
export class YourAppModule { }

再次导入材料模块。像

import: [MaterialModule.forRoot()]

Answer 7

大多数角度为2/4的网站都是试试这个

https://material.angular.io/

Answer 8

// just caching some thing that will be reused (I like using rel) var $parent = $('.parent'); // whatever - to keep some scope var $addButton = $parent.find('[rel="action"]'); var $textInput = $parent.find('[rel="text-input"]'); var $buttonList = $('[rel="button-list"]'); $addButton.on('click', function() { // on click... var currentInputValue = $textInput.val(); // get the value from input... $buttonList.append('<li><button>' + currentInputValue + '</button></li>'); // append a new button... $textInput.val(''); // clear input });

将其添加到您的css文件:)。我有同样的事情发生在我身上。只需要一个主题修复问题。

具有角度4的角度材料

8 个答案: