1

これは実際にはhereから派生したものですが、使用例ははるかに単純です。Angular ディレクティブを含む外部から追加された DOM 要素があることを Angular2 に知らせる方法についてです。この場合、クリック イベントがバインドされない新しいクリック ボタンを追加します。Imo Zone はコンポーネントのテンプレートの変更を自動的に検出すると思っていましたが、明らかにそうではありません。ボタンの新しいコンポーネントを作成し、それを介してロードするという莫大なオーバーヘッドなしで、そのコードを機能させることができる人はいますDynamicLoaderComponentか?

注：私はすでに and を追加NgZoneしChangeDetectorRefて遊んでいます。どちらも私にとってはうまくいきませんでした。

plunkr の完全な例へのリンクは次のとおりです: plnkr.co/edit/hf180P6nkxXtJDusPdLb

そして、これはコンポーネントからの関連する抜粋です:

import {Component, AfterViewInit, ChangeDetectorRef, NgZone, Renderer} from '@angular/core'

@Component({
    selector: 'my-app',
providers: [],
template: `
<div>
<p><button on-click="clickMe()">This works</button></p>

<div id="insert-here"></div>

</div>
`,
directives: []
})
export class App implements AfterViewInit {
constructor(private ref:ChangeDetectorRef, private ngZone:NgZone, private renderer:Renderer) {

}

clickMe() {
alert("Yay, it works");
}

ngAfterViewInit() {
    let newButton = document.createElement("button");
    newButton.setAttribute("on-click","clickMe()");
    let textNode = document.createTextNode("This does not");
    newButton.appendChild(textNode);
    document.getElementById("insert-here").appendChild(newButton);

    // please make my button work:
    this.ref.detectChanges();
}

}
4

1 に答える 1

1

Zone は DOM をまったく気にしません。addEventListener()Zone は、 、 、... などの非同期 API にのみパッチsetTimeout()を適用し、モデルの変更のみをチェックします。

Angular は、DOM を担当していると想定しています。DOM は、モデルが変更されたときに Angular によって更新されますが、その逆ではありません。

Angular に、HTML に一致するコンポーネントまたはディレクティブを作成させたり、動的に追加された HTML のバインディングを解決させたりする方法はありません。Angular は、コンポーネントのテンプレートに静的に追加された HTML に対してのみこれを行います。

DynamicaComponentLoader(非推奨) またはViewContainerRef.createComponent()コンポーネントを動的に追加する方法です。

ユーザーがクリックしてコンポーネントを選択した Angular 2 動的タブで説明されているように、宣言的に動的コンポーネントを簡単に追加できるようにするラッパー要素を使用できます(新しいViewContainerRef.createComponent()

于 2016-06-01T07:18:41.307 に答える