材料2のhtml要素を追加する方法スナックバー

Question

私の要件は、材料2のスナックバーにスピナーを表示することです。

私たちのアプリケーションでは、読み込み、成功、エラーメッセージを表示するためにスナックバーを使用しています。メッセージを読み込んでスピナーも表示したい。私はsnack barの中にloader divを追加しようとしましたが、HTML要素ではなくテキストとしてレンダリングしています。

CSSクラスを追加しようとしましたが、スナックバー要素全体に適用されています。

スナップバーに別のhtml要素を挿入できたら、メッセージと共にローダーを表示できると思います。

あなたのご協力をお待ちしております。

Answer 1

どのようなスピナーを使用したいですか？

私はAngular-Busyを見ています。私はこれまでに使っていましたが、かなり有望です。内部htmlについては、内部HTML要素を追加するのがどれくらい簡単かわかりません。私は主な目的は少しの情報を示すことだと思います。おそらく、ブートストラップアラートの使用を検討し、エラーメッセージや警告メッセージが表示されるまで非表示にすることをおすすめします。

残念なことに、Material's Angularのドキュメントは、あまり言わないほどひどいです。ここで

は、私はあなただけで、観察を設定したり、スピナー上で、アクティブな値にブールことができるに違いないあなたはトースト通知 https://codepen.io/anon/pen/weyJVP

<div id="demo-toast-example" class="mdl-js-snackbar mdl-snackbar"> <div class="mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div> <div class="mdl-snackbar__text"></div> <button class="mdl-snackbar__action" type="button"></button>

の内側にスピナーに使用できる例です。角度で。

幸運のベスト。