angular 将输入传递给 ng-content 中的子组件

Question

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

例如这是我的模板:

<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 组件覆盖，就像它用于 Name 输入一样。

这可能吗？

Answer 1

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

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

我已经使用 ContentChildren 中的组件引用修改了 ngAfterViewInit 中的值。

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