Material Design Liteコンポーネントを* ngForを介して動的に追加された要素と連携させるために苦労しています。私はcomponentHandler.upgradeElementを呼び出す必要があることを理解していますが、この呼び出しをどこに置くのですか?私はthisとthisディレクティブを試していましたが、うまくいかないようです。 具体的には、私の配列の各項目にmdl-menuが必要です。どこを見るかに関する提案はありますか?Angular2 ng For Material Design Liteを持つ要素
6
A
答えて
1
TLDR;要素がDOMに注入された後で、componentHandler.upgradeElementを呼び出す必要があります。私が過去に使ったアプローチは、以下の例で説明されています。
EDIT宣言的ソリューションthis approach hereをかなり良いものに見せたいが、私はそれを自分で使っていない。
私はマテリアルライトComponentHandlerを
import { Injectable } from '@angular/core';
export interface ComponentHandler {
upgradeDom();
}
declare var componentHandler: ComponentHandler;
@Injectable()
export class MaterialService {
handler: ComponentHandler;
constructor() {
this.handler = componentHandler;
}
// render on next tick
render() {
setTimeout(() => { this.handler.upgradeDom(); }, 0);
}
}
をラップサービスを作成した後、あなたは、コンポーネントのDOMに要素を注入した後のサービスの機能をレンダリング呼び出します。あなたのケースでは、これはこれは非常に不自然な例ですが、「どこで」レンダリング呼び出すことが実証*ngFor
後で
import { Component, OnInit } from '@angular/core';
import { DataService } from 'services/data.service';
import { MaterialService } from 'services/material.service';
@Component({
selector: 'app-thing',
templateUrl: `
<ul>
<li *ngFor="let item of data">
{{data}}
</li>
</ul>
`
})
export class ThingComponent implements OnInit {
data: string[]
constructor(
private service: DataService,
private material: MaterialService
) { }
ngOnInit() {
this.service.getData()
.subscribe(data => {
this.data = data;
this.material.render();
});
}
}
関連する問題
- 1. Material Design Liteメニューダイナミックリピート
- 2. Material Design Liteフォントの問題
- 3. Angular2ルータとMaterial Design Liteとのやりとり
- 4. Material Design Liteプログラムによるフローティングラベルのトリガー
- 5. Material Design Liteスイッチがjquery loadで動作しない
- 6. scssのMaterial Design Liteのテーマカラーを変更する
- 7. タブ内のタブを使用していない - Material Design Lite
- 8. Material Liteチェックボックス(角2)
- 9. Material Design Lite - プログラムで開いて閉じるToast
- 10. Material Design Liteを使用してデスクトップブラウザのみをターゲットに設定する方法
- 11. ハイブリッドモバイルアプリケーションのjQueryモバイルコードとMaterial Design LiteのFABボタンの統合方法は?
- 12. Bootrap jsとMaterial Design Lite jsは互換性がありませんか?
- 13. Materail Design Lite - フォームにインラインアイコンを入れる方法
- 14. lxmlの - 私は、次のXML要素を持つ要素
- 15. angular2私はforループでオプションを生成<code>select</code>要素持つルータエラー
- 16. Material Design Lite動的にロードされたhtmlファイルにJSが適用されていません
- 17. MVVM Design for Multi Document app?
- 18. Angular2:使用して作成したAccessテンプレート要素はNG-用のコンポーネント
- 19. 素材設計Lite div間の空白
- 20. バックボーンビューでMaterial Disign Liteコンポーネントを登録解除
- 21. Angular2 ng Safariでレンダリングされないコンテンツ
- 22. Heroku + Material Design Icons + Rails資産パイプラインが停止する
- 23. 2つの要素を持つFramelayout
- 24. angular2のhtml要素でモデルを取得
- 25. 分度器3.1.1 + Angular2は:要素
- 26. 私は要素のベクトルを持つベクトル
- 27. Angular2でng-bootstrapコンポーネントを使用する
- 28. package.jsonとnpmを使って@ angular2-materialをインストールする
- 29. ng-repeatとng-ifのAngular2に相当するのは?
- 30. XMLデータソースを持つテーブル要素内のJasperリスト要素