Angular 6 中包装组件的问题

Question

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

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

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

我想这与我如何为输入设置名称有关 - 它可能与使用 Angular 5 设置的初始堆栈闪电战有关？任何有关如何解决此问题的指示将不胜感激。另外，从不同的子元素中检索数据（如开始日期、结束日期）的最佳做法是什么？

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

Answer 1

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

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> 本身之外无法访问它。

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

Answer 2

在你的代码上做的这些东西非常不符合 Angular 代码风格和常识。

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

你不能在你的模板上做这样的事情。这是完全没有意义的。 hello.component 的逻辑完全封装自外部世界，即组件。您不需要更改此组件的内部结构。你只需要听听你的 hello 组件会Output。

您应该像这样以常规方式为您的输入命名

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

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

无论如何，您无法从父组件访问它以使用一些动态名称。在某些情况下你会这样做，但它非常先进并且针对问题。