相关疑难解决方法(0)

假设我有这个简单的列表渲染组件:

import {Input, Component } from 'angular2/core'

@Component({
  selector: 'my-list',
  template: `
      <div *ngFor='#item of items' (click)='onItemClicked(item)'>
          {{item}}
      </div>
  `
})
class MyList {
    @Input() items: string[];

    onItemClicked(item) { console.log('Item clicked:', item); }
}

我这样使用它:

  <my-list [items]='myAppsItems'></my-list>

到现在为止还挺好.

接下来我决定我希望用户能够为渲染项提供自己的模板,因此我更改了组件

@Component({
  selector: 'my-list',
  template: `
      <template ngFor [ngForOf]="items" [ngForTemplate]="userItemTemplate" (click)='onItemClicked(item)'>
      </template>
  `
})
class MyList {
    @Input() items: string[];
    @ContentChild(TemplateRef) userItemTemplate: TemplateRef;

    onItemClicked(item) { console.log('Item clicked:', item); }
}

并像这样使用它:

<my-list [items]='items'>
   <template #item>
        <h1>item: {{item}}</h1>
   </template>
</my-list>

这只适用于我没有将任何事件处理程序绑定到列表项(plunker).如果我尝试绑定到click事件,就像我在组件的第一个版本中所做的那样,Angular会抛出以下异常: …

我正在使用Angular 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 --
-- …

所以我有一个组件 <template>

<some-component [data]="someArray">
  <template>foo<template>
</some-component>

并且它正在使用它来获取模板

@ContentChild(TemplateRef)
public tmpl: TemplateRef<any>;

然后在它的模板中使用它

<div *ngFor="let item of someArrayFromDataInput">
  <template [ngTemplateOutlet]="tmpl"></template>
</div>

现在我希望能够从item原始模板中打印一些数据,基本上能够做到这一点

<some-component [data]="someArray">
  <template>foo {{ item }}<template>
</some-component>

有可能吗？

我有点不确定如何使用EmbeddedViewRef的context变量.根据我从Angular 2的changelog中收集的内容,该context变量将the setLocal和getLocalmethods 替换为在嵌入视图中设置局部变量的机制.

在查看了这个使用的博客文章后,setLocal我将以下最小的例子拼凑在一起:

import { Directive, TemplateRef, ViewContainerRef } from '@angular/core'

export class FooTemplateContext {
  constructor(public bar: string, public baz: string, public qux: string) {}
}

@Directive({
  selector: '[foo]'
})
export class Foo {
  constructor(viewContainerRef: ViewContainerRef, templateRef: TemplateRef<FooTemplateContext>) {
    let context = new FooTemplateContext('bar', 'baz', 'qux');
    let view = viewContainerRef.createEmbeddedView(templateRef, context);
  }
}

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

import { Foo …