コンポーネントはインラインテンプレートで転写されます

Question

私は角2-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> 

そして、第二の問題が表示されます。

-- insert template here -- 
-- insert template here -- 
-- insert template here -- 
-- insert template here -- 
{item.make | uppercase} 

ので角度が実際に*ngFor内で使用するためのテンプレートをコピーしません、それだけの要素を結合し最後の項目に関連付けられます。

これはどのように機能するのですか？

私はAngularJSと同じ問題を抱えていました。ここではpetebacondarwin posted a solution to manipulate the DOM through compileですが、それは素晴らしいものでした。私は角度2でこのオプションを持っています。ElementRefを私のコンポーネントに注入しますが、！ 1つの大きな違いは、AngularJSのcompileがデータ結合前に外れたことです。つまり、テンプレートに{{item.make}}を使用しても問題はありませんでした。角2では、手の前には{{item}}が解析されているので、これは無駄なようです。だから、これを進めるにはどうすればよいでしょうか？少し違う表記[[item]]を使用し、文字列全体を置換する文字列は、最もエレガントな方法と思われません。

ありがとうございます！

//編集：問題を再現するPlnkrがあります。 *ngFor内部

Answer 1

• <ng-content>は、意味のある何もしませんので、

  <li *ngFor="let item of data"> 
      -- insert template here -- 
      <ng-content></ng-content> 
  </li> 
  

、動作しません。すべてが最初に継承されます<ng-content>

https://github.com/angular/angular/issues/8563お客様の要件を一部解決する可能性があります。

Binding events when using a ngForTemplate in Angular 2

ng-content select bound variable

は、あなたの質問に示されているように似た何かをできるようになるアプローチであるかもしれません。
コンテンツを <template>タグで囲むには、コンポーネントのユーザーが必要です。 ngForTemplate方法綴るする

Answer 2

：（。エレメントは現在<ng-template>呼ばれる 4角のように）

を

1. 両外側および内側部品に<template>タグを使用、<ng-content>の代わりに。

2. <li>がapp.component HTMLに移動し、この成分に<template>は特別を有する「let-」内部成分に反復変数を参照する属性：

   <my-list [data]="cars"> 
       <template let-item> 
       <li> 
        <div>{{item.make | uppercase}}</div> 
       </li> 
       </template> 
   </my-list> 
   

3. を内部成分は、同様<template>を有するので、同様にngForの変異体を使用：

   <ul> 
       <template #items ngFor [ngForOf]="data" [ngForTemplate]="tmpl"> 
        -- insert template here -- 
       </template> 
   </ul> 
   

4. ngForTemplate属性に割り当てられた 'のTMPL' 変数は、コンポーネントコードでフェッチする必要がある：

   export class MyListComponent { 
       @Input() data: any[]; 
       @ContentChild(TemplateRef) tmpl: TemplateRef; 
   } 
   

5. @ContentChildとTemplateRef角度ビットであるので、

   import { Component, Input, ContentChild, TemplateRef } from '@angular/core'; 
   

参照をインポートする必要がありますこれらの変更を伴うお尻のフォークはここにplnkrです。

これは、データをリストに渡しているだけでなく、外側にngForを持つことができるため、問題の解決策として最も満足できる方法ではありません。さらに、追加のコンテンツ（リテラル ' - ここにテンプレートを挿入する'）がドロップされるので、それも外側のテンプレート上になければならないことを表示したかったのです。

内部コンポーネント内で（サービスコールから）反復が提供され、コード内でテンプレートの操作を行うのが便利な場合があります。