web-dev-qa-db-ja.com

Angular2：複製コンポーネント/ HTML要素とその機能

だから、質問はかなり簡単です...

テーブルといくつかのangularロジック（スタイルの計算など））があります...特にTHでこれを持っています

[class.hidden] = "column.group !== 'key-data' && currentTableView !== column.group"

テーブルスティッキーヘッダー機能では、テーブルのクローンを作成し、固定して配置する必要があります。ディレクティブを使用して、次のような処理を行います（簡略化）

let newTable = element.cloneNode(true);
body.appendChild(newTable);

明らかにangularロジックはnewTableに適用されませんが、私はそれが欲しいです...

どうすればいいのですか？

javascriptangularangular2-directives
22
DS_web_developer

だから私はいくつかの研究を行い、これが私が思いついたものです。

テンプレートと[ngTemplateOutlet]を使用すれば、それほど難しくはありません。これはどのように機能するかです：

@Component({
  selector: 'my-app',
  template: `
    <template #temp>
        <h1 [ngStyle]="{background: 'green'}">Test</h1>
        <p *ngIf="bla">Im not visible</p>   
    </template>
    <template [ngTemplateOutlet]="temp"></template>
    <template [ngTemplateOutlet]="temp"></template>
    `
})

export class AppComponent {
    bla: boolean = false;
    @ContentChild('temp') testEl: any;
}

したがって、参照テンプレートを作成し、その中にすべてのロジックを追加してから、[ngTemplateOutlet]を使用してテンプレートのコピーを作成します。内部バインディングとangular機能はすべて保持されます。

ここに働くプランカーがあります：

http://plnkr.co/edit/jPt5eKUfLUe9FxnLH8bL?p=preview

ご覧のとおり、*ngIfと[ngStyle]を使用してテストしたところ、期待どおりに機能し、他の種類のディレクティブが機能しない理由はわかりません。

*ngForを使用することもできますが、その場合は[ngOutletContext]を提供する必要があります。私はあなたが取り組んでいるライブラリでそれをやった、ここで例を見ることができます：

https://github.com/flauc/ng2-simple-components/blob/master/src/select/select.component.ts

12
Filip Lauc