Question

我如何在Angular2中访问超级组件类变量到子组件？

超级组件 Article.ts

@Component({
  selector: 'article'
})

@View({
  templateUrl: './components/article/article.html?v=<%= VERSION %>',
  styleUrls : ['./components/article/article.css'],
  directives: [CORE_DIRECTIVES, AmCard, NgFor]
})

export class Article{

  articleArr : Array;
  constructor() {
    this.articleArr = new Array();
  }

  articleSubmit(articleSubject, articleName, articleUrl)
  {
    this.articleArr.push({title: articleSubject.value, user : articleName.value, url : articleUrl.value});

  }
}

超级组件 article.html

<div *ng-for="#item of articleArr"> <am-card card-title="{{item.title}}" card-link="{{item.url}}" card-author="{{item.user}}"></am-card> </div>

子组件 amcard.ts

@Component({
  selector: 'am-card',
  properties : ['cardTitle', 'cardLink', 'cardAuthor']
})

@View({
  templateUrl: './components/card/card.html?v=<%= VERSION %>',
  styleUrls : ['./components/card/card.css'],
  directives: [CORE_DIRECTIVES]
})

export class AmCard {
  constructor() {

  }
}

子组件 amcard.html

<div class="card"> ... </div>

所以我的问题是如何在 AmCard类中访问 articleArr of Article Class ？

高级谢谢你的帮助。

Answer 1

您可以使用angular2依赖注入将父组件注入子组件。使用@Inject参数装饰器和forwardRef来执行此操作（Value允许我们引用尚未定义的ConverterParameter。因此，您的forwardRef组件将如下所示（请参阅this plunker）：

Article

但是，恕我直言，这是一个糟糕的模式。如果可能，使用output property (event binding)将消息传递给父组件并在父组件中处理该消息会更好。在你的情况下，它看起来像（见this plunker）：

AmCard

如何访问超级组件类变量到子组件类？

1 个答案: