ng-content 中的子组件的角度传递输入答案

【问题标题】：angular passing input to child components in ng-contentng-content 中的子组件的角度传递输入
【发布时间】：2019-05-27 07:00:57
【问题描述】：

我想使用内容投影将一些属性从父组件传递给子组件，可以吗？

例如这是我的模板：

<my-form [display]="'horiz'">
  Email: <my-input [type]="'email'" ...></my-input>
  Name: <my-input [type]="'name'" [display]="'vert'" ...></my-input>
  ...
</my-form>

现在my-form 组件有这样的模板：

<form ...>
  <ng-content></ng-content>
</form>

我想要的是my-form 的display 属性可以被my-input 组件访问，这样它也可以被my-input 组件覆盖，就像它用于名称输入一样。

这可能吗？

【问题讨论】：

我认为this 会帮助你！
是否要覆盖 my-inpu 组件中的表单值？
@Chellappan 是的，如果 my-input 有值，则应使用它，如果没有，则应使用 my-form 中的值。
这个链接可能会有所帮助：stackoverflow.com/questions/53946907/…
@PrashantPimpale 该视频解释了内容投影的使用，但对我在问题中提出的问题没有帮助。您能否指出视频中您认为应该有帮助的确切部分...谢谢！

标签： angular angular7

【解决方案1】：

你可以使用@ContentChildren，在stackblitz上做了一个例子：

https://stackblitz.com/edit/angular-content-children-example

我使用来自ContentChildren 的组件引用修改了ngAfterViewInit 中的值。

希望对您有所帮助。如果有更好的方法，请随时更新代码。

【讨论】：

这是一种令人讨厌的方法，但它实际上似乎工作：D......它是否有可能适用于所有类型的组件而不仅仅是GrandChildComponent？谢谢顺便说一句，我的意思是如果我有不止一种类型的组件，比如my-input、my-select 等。
我认为也可以通过为每种类型的组件创建一个@ContentChildren 然后循环所有这些组件来完成。对吗？
这是一种方法。另一种方法是为 app-component 中的每个元素添加一个自定义指令，并在内容子项中使用它。您可以使用{read : <tokenType>}阅读read a different token from the queried elements.
我对自定义指令不是很熟悉，你能把它放在例子中吗？虽然我正在寻找的已经实现。谢谢你。