問題タブ [angular-material2]

モバイル デバイスやタブレットなどの小さな画面で折りたたまれるAngular マテリアル 2を使用してナビゲーション バーを作成しようとしています。

私は見つけることmd-buttonができmd-menu-barましたが、Angularの資料のようではありませんでした.

*ngIf を使用して、構築されたクラスのメンバーに基づいて要素を表示および非表示にしようとしています。しかし、他のデータメンバーを使用してタイトルなどを表示できるにもかかわらず、次のエラーが発生し続けます。

私のhtmlは次のようになります

私の *component.ts ファイルのナビゲーション配列は次のように定義されています

そしてナビゲーションクラスは次のようになります

*ngIf を削除すると、すべて正常にレンダリングされます。navigation.title を使用して名前を表示できるのに、navigation.hidden を使用して要素を表示するかどうかを切り替えることができないのはなぜですか?

編集 - - - - - - - - - - - - - - -

しかし、いくつかの記事では、これは Angular 2 の悪い習慣であると述べています。

私は<md-input>要素を持っています:

CSSを介してスタイルを適用しようとしています:

ブラウザー デバッガーに適用されているスタイルが表示されません。私はこれを不適切に行っていますか？

を使用しangular-cliて Angular 2 アプリケーションを作成しています。アプリケーションが で作成された後、ページng new NEW_PROJECTNAMEを取得しindex.htmlます。このページには、このようなものがあります。

言うまでもなく、この読み込みメッセージは完全に専門家らしくないように見えるかもしれません. だから私の質問は、プログレスバーやスピナーのようなより適切なものを追加するにはどうすればよいですか?

私は、Angular フレームワークの外側で何が起こる必要があるかを認識しています (そうですか?)。非常に使いやすい Angular 2 パッケージ (例: Angular 2 マテリアルまたはng2-slim-loading-bar ) をいくつか見つけましたが、これらのパッケージは、既に Angular フレームワークに入っていることを前提としています。つまり、Angular コンポーネントの中にいるということです。

だから私の質問は次のとおりです。

• コンテンツが配置される前に読み込みインジケーターを表示するために使用できる Angular 2 フックはあり<app-root></app-root>ますか?
• Angular フレームワークの外で作業する必要がある場合、最善のアプローチは何でしょうか? 単純に、 or を使用してパッケージをインストールし、それを で参照し、bowerorを使用して読み込みインジケーターを表示する必要があると思います。Angular の読み込みが完了するまでに、内部にあるものはすべて置き換えられると思います。このアプローチに関する私の懸念の 1 つは、ビルド/パッケージ化スクリプトです (ビルドしたアプリケーションにこの bower/npm パッケージを含める方法を考え出す必要があります)。npmindex.htmljQuery<app-root></app-root>

どんな助けでも大歓迎です。

特定の幅になるように入力をスタイルしようとしています。Angular Material 2 を使用していますが、何らかの理由で CSS のスタイルが入力タグに適用されません。これは、影響を受けるコードとともに、私の問題の作業中のプランカーです。

Angular Material 2 によって作成されている入力のスタイルを設定するにはどうすればよいですか?

angular material 2のいくつかのコンポーネントを使用しているangular 2アプリ用のカスタムテーマを作成しようとしています.

これをグーグルで検索しようとしましたが、あまり見つかりませんでした。利用可能な唯一のドキュメントは、Angular Material に関するものです:- https://material.angularjs.org/latest/Theming/03_configuring_a_theme

angular 2 に対応するドキュメントを見つけることができませんでした。

これまでのところ、@angular2-material/core/style の下に _default-theme.scss という名前のファイルがあり、以下の内容であることがわかりました:-

私が変更され

に

ただし、これは機能していないようです。どんな提案でも大歓迎です。

Material Design アイコン セット内のアイコンの合字名を特定するにはどうすればよいですか?

リポジトリ:

https://github.com/google/material-design-icons

ドキュメンテーション：

https://design.google.com/icons/

ドキュメントには、各アイコンの下に名前が付いたアイコンがリストされていますが、アプリケーション内から各アイコンを参照する方法についてはドキュメントに記載されていません。

私は次のことを推測しましたが、結果はまちまちです。

<md-icon>close</md-icon>動作 -Xアイコンが表示されます

<md-icon>help outline</md-icon>失敗 - 単語helpが表示されます

"@angular2-material/toolbar": "2.0.0-alpha.6-2"

<md-toolbar>アプリケーション全体の背景の不透明度とパディングを変更したいと考えています。

私のアプリケーションは次からインポートしていindex.htmlます:

Material 2 を使用しています。私の考えでは、Material 2toolbar.scssファイル内でこれらの設定を何らかの方法でオーバーライドする必要があると考えています (以下に抜粋)。

toolbar.jsフォルダー内のファイルを掘り下げたところvendor、全体が埋め込まれてtoolbar.cssいるように見えます...したがって、これらのスタイルプロパティのいずれかをオーバーライドする機会がある唯一の場所は、コンポーネントをMdToolbar介して使用するコンポーネント内にあるようです' stylesUrls... (ところで: これは動作します)

私がやりたいことはかなり一般的な欲求のように思えるので、何かを見逃していると思います（ただし、Googleマテリアルを使用するのは嫌なことかもしれません---コミュニティがどれほど堅実であるかはわかりません.パディング、背景の透明度などの要素について）... いずれにせよ、自信を持って進めるためには、私の無知を取り除く必要があります。

Material 2 sidenavを使用し#rightNavて、子コンポーネントテンプレートのクリックイベントから、親コンポーネントテンプレートでローカル参照をトリガーする方法を考え出そうとしています。注釈を使用する必要があると思いますが、方法がわかりません。(click)="rightNav.open()"@ViewChild

子コンポーネント テンプレート (app-conditions-list):

親コンポーネント テンプレート (条件コンポーネント):

子コンポーネントは、親コンポーネント テンプレートにネストされています。ありがとう！

Material2 プロジェクトでは、すべてのコンポーネントが ViewEncapsulation.None を使用します。(例: MdButton )

最近、カプセル化がmd-toolbar のNone に変更されました。

どうしてこんなことに？Angular2 でこのようなフレームワークを作成する最大の利点の 1 つは、CSS をカプセル化できることではないでしょうか。

ポリマー コンポーネントは、この機能を使用しているようです。なぜMaterial2はしないのですか?