Angular 2 个指令及其属性

Question

我有一个简单的应用程序可以从示例 API 中获取数据。试图找出将指令定义为组件时出了什么问题：

app.ts

import {Component, View, bootstrap, For} from 'angular2/angular2';
import {ArticlesSvc} from 'services/articlesSvc';
import {ArticleItem} from 'directives/ArticleItem';

@Component({
  selector: 'main-app',
  injectables: [ArticlesSvc]
})

@View({
  template: `<p *for="#post of posts">{{ post.title }} <article-item [body]="post.body"></article-item></p>`,
  directives: [For,ArticleItem]
})

class MainComponent {
  posts: Array<string>;

  constructor(articlesSvc: ArticlesSvc) {
    this.posts = [];

    articlesSvc.get('http://jsonplaceholder.typicode.com/posts').then((data) => {
       this.posts = data;
    });

  }

}

bootstrap(MainComponent);

这里是 ArticleItem 组件：

import {Component, View} from 'angular2/angular2';

@Component({
  selector: 'article-item',
  properties: ['body']
})

@View({
  template: `<p>{{ body }}</p>`
})

export class ArticleItem {
    body:string;
}

出于某种原因，它给我 Unexpected number 错误。如何正确连接这两个组件？用自己的视图定义子组件是正确的方法吗？

Answer 1

我认为问题是当您尝试在子组件中绑定属性时，您设置的是数组而不是对象。因此，当它尝试为绑定属性创建 setter 时，它会遍历为 Component 的 properties 键提供的值 (iterableChanges)，但在您的情况下它是一个数组而不是对象，因此为索引创建一个 setter，例如：“0”失败。

即尝试：

@Component({
  selector: 'article-item',
  properties: {body: 'body'} //<-- Here
})

另一条注意事项，可能是错字（与此示例无关）：您的主要组件 class' post 属性声明为类型 Array<string> 而不是可能 Array<Post>（只是为了类型安全 :)）：

interface Post extends ArticleItem{//or even class Post
    title: string;
}

Plnkr

Angular 2 个指令及其属性

Angular 2 Directives and its attributes

typescript

angular