来自 index.html 的 Angular 输入数据绑定常量答案

【问题标题】：Angular input data-binding constants from index.html来自 index.html 的 Angular 输入数据绑定常量
【发布时间】：2021-11-15 15:42:19
【问题描述】：

我真的只是想将一些常量传递给 Angular Web 组件。

这是我的 index.html：

<body>
  <cast-catalog nVisible="4" [someValue]="'ccccc'"></cast-catalog>
</body>

cast-catalog-component.ts

export class CastCatalogComponent implements OnInit {

  @Input('nVisible') numVisible : number = 6;
  @Input('someValue') someValue : string ;

<some other code>

对于 numVisible，我仍然得到 6 而不是 4，对于 someValue，我仍然得到一个空白值。如果它将数据从一个组件传递到另一个组件，我没有这个问题，但如果我从 index.html 执行，它就不起作用。

【问题讨论】：

标签： angular input data-binding web-component

【解决方案1】：

如果我们在 web 组件中有输入，命名模式会在我们使用它时发生变化。我们在 Angular 组件中使用 camelCase，但要从另一个 HTML 文件访问该输入，我们必须使用 kebab-case：所以试试这个

<cast-catalog n-visible="4" some-value="'ccccc'"></cast-catalog>

【讨论】：