web-dev-qa-db-ja.com

Angular Angular 4のマテリアル

新しいAngular 4でAngular Materialを使用するオプションはありますか？

公式 material.angularjs.org のコメント：

Angular Materialは最近、バージョン1をリリースしました。これは、安定しており、実稼働で使用できる状態であると考えられています。開発者は、Angular Material v1がAngular 1.xでのみ機能することに注意する必要があります。

Angular 2に関して：

Angular Material v2の開発は、angular/material2 GitHubリポジトリでも進行中です

Angular 4はどうですか？ 1つのプロジェクトでAngular 1.xとAngular 4を何らかの方法でバインドして、Angular 4つの新機能をもたらし、素晴らしいAngularマテリアルフレームワーク？

angularangular-material
26
Herman Marvel

here からGetting Startedガイドを参照できます。このドキュメントは、angular v4.0.0をサポートするように更新されました

一部のマテリアルコンポーネントは、より高度なトランジションを実行できるようにするために、Angularアニメーションモジュールに依存しています。これらのアニメーションをアプリで機能させるには、@angular/animationsモジュールをインストールし、@angular/platform-browser/animationsからアプリにBrowserAnimationsModuleを含める必要があります。

32
Sanket

2016年12月、Angularチームが走り回り、「Angular 2」と言うのをやめて「Angular」とだけ言うようにみんなに言っていたとき、私はちょっと馬鹿げたマーケティングだと思った。

しかし、このサイトの質問を読んで、私は彼らの嘆願の合理性を見始めています。 Angular 1.xからAngular 2は、完全に書き直され、ほぼすべてを壊した完全に再構築されたフレームワークを表しました。これに加えて、semverへの切り替えが行われたため、新しいメジャーバージョン番号がより迅速に提供されるようになりました。

要するに、私が彼らが立ち去ろうとしていたのは、「Angular 4はAngular 2がAngular 2でAngular 1だった」という考え方でした「これは間違いです。

この認識の問題も、コード名4.0の「目に見えない変身」につながった原因です。

したがって、Angular2向けに設計されたパッケージを見ると、ほとんどの場合、Angular 4でも動作します。また、これらのパッケージを破壊するng4の変更がある場合は、それらに対応するリリースがすぐに表示されます。 ..または、そのパッケージがプロジェクトで使用するのに十分に維持されているかどうかについての答えがあります。

5
IndyWill

Angular 4.0.0およびCLI 1.0.0も使用していますが、正常に動作します。コンポーネントのテーマ設定が必須であるため、上記のスタイルが設定されていないチェックボックスのような奇妙な動作が発生すると言うだけです。事前に構築されたangularマテリアルテーマを使用するか、独自のテーマを生成できます。 index.htmlにスタイルシートを含めるだけで、魔法が表示されます。

angularマテリアルテーマの詳細については、こちらを参照してください。 https://material.angular.io/guide/theming

2
Driss Chelouati

これを行う：

npm install --save @angular/animations

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

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

再び材料モジュールをインポートします。好む

import: [MaterialModule.forRoot()]
1
Deepak swain

angular-quickstart ボイラープレートを here からダウンロードまたはフォークできます。このプロジェクトでは、angular material 2.0.0-beta.6およびangular 4.0.0。最新バージョンの正しい設定を見つけるのはかなり困難でした。

1
Rajan Chauhan

angular 2/4サイトのほとんどはこれを試してください

https://material.angular.io/

1
Overflowrun

angular 4.0.0（angular cli 1.0.0を使用）で作業を開始し、マテリアル2.0.0-beta2で使用しようとしました。 UIのいくつかのバグを除き、問題なく動作します。

  1. マテリアルチェックボックスはひどく見えますが、内部にネイティブチェックボックスがあります（ Screenshot ）

不安定なものに遭遇した場合に備えて、この投稿を更新します。今のところ https://github.com/mseemann/angular2-mdl を試すことができるようです。

1
Alex Dzeiko

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

それをcssファイルに追加してください:)。私にも同じことが起こりました。その問題を修正するテーマが必要です。

0
Jasmit Tarang