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

Question

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

这是我的 index.html:

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

演员目录-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 执行此操作，则它不起作用。

Answer 1

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

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

更多https://indepth.dev/posts/1116/angular-web-components-a-complete-guide

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

Angular input data-binding constants from index.html

data-binding

input

web-component

angular