web-dev-qa-db-ja.com

[ngStyle]ディレクティブをionic 3 / angular

これは私が持っていたものであり、機能していて、progressメソッドにバインドされていて、正しく表示されていました。

<div [ngStyle]="{'width.%': progress()}"></div>

次に、要素を動的に作成する必要があります。

let myDiv = <HTMLElement>(document.createElement('div'));

しかし、progressメソッドを動的に作成された要素にバインドする方法が見つからないようです。

renderer を使用するコードは、@ fatemefazliによって提案されているように、変更検出がないため、データが利用可能になったときにレンダリングされず、進行状況の変更メソッドをリッスンしません： https：// stackblitz。 com/edit/angular-fpyfmn

DOM要素を動的に作成する決定は、 HammerJS を使用してパンジェスチャをアタッチする必要があるため、次のようにリスナーをアタッチする必要があります。

addGestures(elem){
    var hammer = new Gesture(elem);
    hammer.listen();

    hammer.on('pan', (e) => this.Pan(e));
  }

イベントの発行/エミッターを作成しようとしましたが、発行するトリガーがありません。

angularionic-frameworkionic3angular-directive
9
August

TricheTricheが言ったように、DOMに直接アクセスするべきではありません。実際、これは推奨されないだけでなく、動的な変更では機能しません。これは、angularゾーン内で実際に実行されなくなったためです。

あなたがする必要があるのは：

  1. ホストする現在のコンポーネントに新しいプレースホルダーを作成します（2）
  2. イベントのリッスンと処理を担当する新しいディレクティブを作成し、スタイルの変更をレンダリングします
  3. ComponentFactoryResolver を使用して、（2）を（1）に動的に挿入します

Angularのページで詳細を確認してください Angularの動的コンポーネントロードページ ここでは、必要なものと同様の実行中の 例 が表示されます

1
WebDever
constructor(public el: ElementRef, public renderer: Renderer){
    this.myDiv = <HTMLElement>(document.createElement('div'));
    renderer.setElementStyle(this.myDiv , 'width', this.progress()+'%');
}
2
Fateme Fazli

DOMの変更を自分で処理することは想定されていません（要素の追加は処理されます）。

レンダラーを使用する場合でも、これは避けたいものです。

私が提案するのは、最初に行ったように、ハードコードされた要素でイベントとデータバインディングを使用することです。

また、何らかの理由でdivを作成する必要がある場合は、DOMに自分で触れる必要のない解決策がある可能性があるため、達成したいことを説明してください。

1
user4676340