Question

对于列宽，它说sizeLg是属性，size-lg是属性。我该使用哪个？为什么？什么时候？

此：

<ion-col size-lg="6"></ion-col>

或者这个：

<ion-col sizeLg="6"></ion-col>

或者这个：

<ion-col [size-lg]="6"></ion-col>

或者这个：

<ion-col [sizeLg]="6"></ion-col>

...似乎都是我可以做的事情，但是我不确定为什么以及何时需要，而且在文档中不清楚。

在Ionic的情况下，为什么sizeLg是一个属性，而size-lg是一个属性，其含义是什么？

Answer 1

我不知道Ionic 4文档与其发布前的状态相比有多大改进，但是您的问题实际上触及了基础的Stencil构建器及其设计的行为，尤其是对于非角度使用（即作为裸露的Web组件）。 / p>

一个快速的答案是：属性直接反映属性，泛化了Angular属性绑定，因此即使在Angular之外，其工作方式也非常相似。

因此，如果您在Angular中使用Ionic 4，则所有4种语法均应正常工作（即在功能上等效），其中[sizeLg]="6"可能是最熟悉的形式。

模具是为Ionic 4提供支持的构建工具，将其编译为Web组件（自定义元素）。在Stencil中，您将Angular / React以某种混合的方式设计Component，然后编译器将所有Input属性转换为JS属性和HTML属性，从而模仿了其他标准HTML元素的API。考虑一个<input type="checkbox">元素及其checked属性，它也是一个读/写JS属性（您可以执行document.querySelector("input").checked = true）。

Stencil对其输出Web组件执行此操作，将所有公开的JS输入属性（通常在camelCase中）反映为HTML属性（在等效的蛇格类型中），以便您可以通过两种方式中的任何一种来定义输入，例如标准HTML元素，即使您不使用Angular。

但是，在Angular中使用[size-lg]="6"时（当然还有非方括号形式），您将受到限制。因此，Ionic添加了一个Angular包装器，该包装器告诉Angular有基础的@Input() sizeLg属性，现在您可以使用更多的Angular样式[sizeLg]="6"形式。

Answer 2

此

<ion-col size-lg="6"></ion-col>

和

<ion-col sizeLg="6"></ion-col>

都是相同的，但是在Ionic 4中，它们引入了sizeLg语法，因为这是变量名称的javascript标准。我建议使用这种方式

<ion-col sizeLg="6"></ion-col>

和

<ion-col [size-lg]="6"></ion-col>
<ion-col [sizeLg]="6"></ion-col>

用于=之后的代码是代码中的变量。

Ionic 4组件的“属性”与“属性”之间有什么区别？

2 个答案: