简体繁体 English

Angular 2将数据从组件B传递到组件B定义的模板

[英]Angular 2 Pass Data from Component B to the template defined by Component B

原文 2016-12-15 23:02:37 9 1 templates/ angular/ data-binding

I am a little embarrassed to ask this question because I fear the answer is something very obvious, but to me it is illusive. 我有些尴尬地问这个问题，因为我担心答案很明显，但对我来说却是虚幻的。

I have three components A, B & C. each of these components has a template. 我有三个组件A，B和C。每个组件都有一个模板。 The template of component A contains the custom tag 组件A的模板包含自定义标签 and of course the template of component B contains a custom tag . 当然，组件B的模板包含一个自定义标签。

Now I have a chunk of data that needs to flow from component B to C, now if I @Output from B the data is bound to component A template ... or some such thing. 现在，我有大量的数据需要从组件B流向C，如果我从B输出@数据，则将数据绑定到组件A模板……或类似的东西。 This dose not make this available to C because the do not share a template. 由于不共享模板，因此该剂量无法使C使用。

It seems that I need to be able to "Output" the data to the template on B from component B, but then this would seem circular. 看来我需要能够将数据从组件B“输出”到B上的模板，但是这似乎是循环的。 I have looked at Template Reference Variables with @ViewChild but this doesn't seem to be working to make data visible on template B. 我已经使用@ViewChild查看了模板引用变量，但这似乎无法使数据在模板B上可见。

Clearly there is something obvious that I have missed, any ideas? 显然有一些我想念的东西，有什么想法吗？

1 个解决方案

To recap... I have three components A, B & C. each of these components has an associated template. 回顾一下...我有三个组件A，B和C。每个组件都有一个关联的模板。 The template of component A contains the custom tag <Bx> and the template of component Bx contains a custom tag <C> . 组件A的模板包含定制标记<Bx> ，而组件Bx的模板包含定制标记<C> 。 It is desired to pass a data object from A to C. This data object is defined in the 'this' scope of component A as "this.data" so the first step in this data transfer is to include an @Import() data: Obj in Component B and then add <B [data]="data"></B> in the template of A. This @Import statement makes the this.data available to Component B and which may then be placed on the template of component B as <C [data]="data"></C> . 希望将数据对象从A传递到C。此数据对象在组件A的“ this”范围中定义为“ this.data”，因此此数据传输的第一步是包含@Import() data: Obj在组件B中观察，然后在A的模板中添加<B [data]="data"></B> 。此@Import语句使this.data可用于组件B，然后可以将其放置在模板中组件B的<C [data]="data"></C> 。

Many thanks to @Sasxa for the guidance, my apologies for the narrative approach but it is the clearest way to explain my situation and resolution. 非常感谢@Sasxa的指导，我对叙述方法深表歉意，但这是解释我的处境和解决方案的最清晰方法。