私はAngular2-rc3を使用していて、Componentトランスクルージョンを少し異なる方法で適用したいと思っています。これが私のコンポーネントです：
import { Component, Input } from '@angular/core';
@Component({
selector: 'my-list',
template: `<ul>
<li *ngFor="let item of data">
-- insert template here --
<ng-content></ng-content>
</li>
</ul>`
})
export class MyListComponent {
@Input() data: any[];
}
そして、私はそれを次のように使用します：
<my-list [data]="cars">
<div>{{item.make | uppercase}}</div>
</my-list>
ご覧のとおり、コンポーネントで使用されるインラインテンプレートを定義しようとしています。今、これはひどく間違っています。まず、それを言うデータバインディングの例外can't read property 'make' of undefined。item.makeではなく、周囲のコンポーネントを読み取ろうとしていますMyListComponent。しかし、今のところこれを一時的に無効にしても：
<my-list [data]="cars">
<div>{item.make | uppercase}</div>
</my-list>
次に、2番目の問題が発生します。
-- insert template here --
-- insert template here --
-- insert template here --
-- insert template here --
{item.make | uppercase}
したがって、Angularは実際には*ngFor、内で使用するためにテンプレートをコピーするのではなく、要素をバインドするだけで、最終的に最後のアイテムに関連付けられます。
これを機能させるにはどうすればよいですか？
私はAngularJSでも同じ問題を抱えていました。そこでは、petebacondarwinがコンパイルを通じてDOMを操作するソリューションを投稿しました。これは素晴らしいことでした。ElementRefコンポーネントに注入することで、Angular 2でもこのオプションを利用できますが、！大きな違いの1つはcompile、AngularJSではデータバインディングの前にオフになったということ{{item.make}}です。つまり、テンプレートでの使用に問題はありませんでした。Angular 2では、{{item}}事前に解析されているため、これは問題ないようです。それで、これについて行くための最良の方法は何ですか？[[item]]全体を置き換えるためにわずかに異なる表記法と文字列を使用することは、最もエレガントな方法ではないようです...
前もって感謝します！
//編集：これが問題を再現するPlnkrです。
ngForTemplateメソッドを詳しく説明するには：
（Angular 4以降、要素は現在呼ばれてい<ng-template>ます。）
の<template>代わりに、外部コンポーネントと内部コンポーネントの両方でタグを使用し<ng-content>ます。
<li>app.component HTMLに移動し、<template>このコンポーネントには、特別な持って「let-」内部コンポーネントに反復変数を参照する属性を：
<my-list [data]="cars">
<template let-item>
<li>
<div>{{item.make | uppercase}}</div>
</li>
</template>
</my-list>
内部コンポーネントに<template>も同様の機能があり、次のようにngForのバリアントを使用します。
<ul>
<template #items ngFor [ngForOf]="data" [ngForTemplate]="tmpl">
-- insert template here --
</template>
</ul>
ngForTemplate属性に割り当てられた「tmpl」変数は、コンポーネントコードでフェッチする必要があります。
export class MyListComponent {
@Input() data: any[];
@ContentChild(TemplateRef) tmpl: TemplateRef;
}
@ContentChildとTemplateRefは角度ビットなので、インポートする必要があります
import { Component, Input, ContentChild, TemplateRef } from '@angular/core';
ここplnkrでこれらの変更を加えたプランカーのフォークを参照してください。
データをリストに渡すので、これはあなたが述べた問題に対して最も満足のいく解決策ではありません。外側にngForがあるかもしれません。さらに、追加のコンテンツ（リテラル '-ここにテンプレートを挿入-'）が削除されるため、外部テンプレートにも含まれている必要があることを表示する必要がありました。
反復が内部コンポーネント内で提供される場合（たとえば、サービス呼び出しから）、コードでテンプレートの操作を行う場合に役立つ可能性があることがわかります。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加