Angular 6中包装器组件的问题

Question

我想为saturn-datepicker创建一个包装器组件，因为计划是现在在几个不同的应用程序中使用它，并可能在以后将其关闭。我是Angular的新手，但是forked and created a "working" example是我从here的Stackblitz中找到的。

问题在于它仅在编辑模式下工作-当我尝试在VS Code中运行代码或使用正常链接运行时，出现错误

ERROR DOMException: Failed to execute 'setAttribute' on 'Element': '#' is 
not a valid attribute name.

我想这与我设置输入名称的方式有关-可能与Angular 5设置的初始stackblitz有关吗？任何有关如何解决此问题的指针将不胜感激。另外，从不同的子元素中检索数据（如开始日期，结束日期）的最佳实践是什么？

编辑：我正在尝试在日期选择器周围创建一个“包装器”-以便现在可以在应用程序中实现和使用它，但稍后又换用另一个包装器（只更改包装器中的代码，不在应用程序本身中）。现在，这种情况是特定于日期选择器的，但是以后其他库可能也需要这样做。

Answer 1

在您的代码上完成的这些工作完全超出了角度代码的风格和常识。

<sat-datepicker #${name} [rangeMode]="true">

您不能在模板上做类似的事情。这是完全没有意义的。 hello.component的逻辑完全由外部世界（也称为组件）封装而成。您不需要更改此组件的内部。您只需要听听您的hello组件会Output。

您应该使用这样的常规方式命名输入的名称

<sat-datepicker #name [rangeMode]="true">

以及所有其他${name}，因为这是错误。

无论如何，您都无法从父组件访问它以使用某些动态名称。在某些情况下，您可以这样做，但是它非常先进并且特定于问题。

Answer 2

让我们考虑一下事情发生的顺序：

1. 组件已创建。
2. 您的模板已加载。此时，插值操作也已完成。
3. 您的@Input属性已处理并从呼叫站点接收其值。

这就是问题所在。模板加载时，name的值仍未定义。剩下的就是这个无效的Angular模板：

Kraken提出的观点（我认为）是，即使模板变量名已成功替换到模板中，也无法在呼叫站点使用。

您可能有这个：

<form>
  <app-datepicker-component name="one"></app-datepicker-component>
  <br><br>
  <app-datepicker-component name="two"></app-datepicker-component>
</form>

那又如何呢？ @ViewChild找不到该组件，因为它无法在<app-datepicker>本身之外访问。

也许，如果您提供了一些背景信息，我们可以帮助您找到您要解决的问题的解决方案。