为什么 HTML/CSS "styles" 有两种不同的语法，它们有什么不同
Why are there two different syntaxes for HTML/CSS "styles" and what do they do differently
HTML/CSS 的新手，我对以下示例中发生的事情的理解存在严重漏洞。
我使用 primeng 构建了一个 Angular 应用程序的外观。我有一个 HTML 的组件，其中有 primeNg 个元素。
我注意到 <p-dropdown [style]="{'width': '100%'}"></p-dropdown> 影响宽度，但是使用语法 <p-dropdown style="width: 100%"></p-dropdown> 不起作用，我得到一个错误：
错误状态：ERROR Error: Cannot find a differ supporting object 'width: 100%'
如果我使用的是 button，那么 <button style="width: 100%"></button> 就可以正常工作。任何人都知道这两种语法实际上有什么不同，以及为什么一种适用于 p-dropdown 而另一种不适用于？
这里有一些有用的信息：
您可以阅读 here，以获得更多解释 - 它称为模板语法。
这里的问题是，您需要知道 angular 类（逻辑）如何与模板（视图）通信 - 以及当实际 html 为该特定元素呈现模板。
这是它的工作原理：
考虑这两种情况：
- 案例 1：
<p-dropdown [style]="{'width': '100%'}"></p-dropdown>
- 案例二：
<p-dropdown style="width: 100%"></p-dropdown>
现在让我们看看它们是如何解释的：
情况1：
这告诉 angular 查找 属性 调用的样式并为其赋值。现在，要理解我的意思 - 考虑一下，Lefthand="Righthand" - 在您创建的所有自定义 angular 元素中，右侧站点是在您的应用程序某处定义的已知 object/function。通常在您的 class.ts 中。因此，要提供一个值而不是对某些 object/function 的引用，您必须进一步用单引号覆盖 righthand，例如 - "'righthand'"。 Angular 将其视为值而不是引用。这就是此选项有效的原因。
案例二：
案例二在编程上看起来是有效的，但对 angular 而言并非如此，除非如上文案例 1 的解释所述，righthand 上提供的内容是 object/function。请记住，在所有自定义元素中，angular 将检查所有内容以查找它在呈现该元素的模板时必须操作和应用的任何引用变量、对象或函数。因此，当它尝试处理您提供的那个元素时，它会得到一个对象 width: 100%，它无法在应用程序的任何位置找到该对象。因此它抛出了一个错误。
Regarding this - Angular doesn't have to do anywork, because this is a valid html element and normal html syntax apply. Angular doesn't have to render anything for <button> because it's an html element and not an angular element/component whose selector is defined.
希望您觉得这有用。
我喜欢 Angular - 让我们使用它，因为它是最好的。
我不知道 Angular，但是
<p-dropdown [style]="{'width': '100%'}"></p-dropdown>
看起来像 Angular 的特定语法。因此，遵循语法的语法结构很重要。在这种情况下，有必要将样式嵌套在方括号中，并将宽度嵌套在花括号中，例如 json 对象。
<button style="width: 100%"></button>
是原生 HTML 语法，因此这种内联样式语法工作得很好。如果你这样做，这将不起作用：
<button [style]="{'width: 100%'}"></button>
因为如前所述，这种语法只适用于 Angular。
HTML/CSS 的新手，我对以下示例中发生的事情的理解存在严重漏洞。
我使用 primeng 构建了一个 Angular 应用程序的外观。我有一个 HTML 的组件，其中有 primeNg 个元素。
我注意到 <p-dropdown [style]="{'width': '100%'}"></p-dropdown> 影响宽度，但是使用语法 <p-dropdown style="width: 100%"></p-dropdown> 不起作用，我得到一个错误：
错误状态：ERROR Error: Cannot find a differ supporting object 'width: 100%'
如果我使用的是 button，那么 <button style="width: 100%"></button> 就可以正常工作。任何人都知道这两种语法实际上有什么不同，以及为什么一种适用于 p-dropdown 而另一种不适用于？
这里有一些有用的信息：
您可以阅读 here，以获得更多解释 - 它称为模板语法。
这里的问题是，您需要知道 angular 类（逻辑）如何与模板（视图）通信 - 以及当实际 html 为该特定元素呈现模板。
这是它的工作原理： 考虑这两种情况：
- 案例 1：
<p-dropdown [style]="{'width': '100%'}"></p-dropdown> - 案例二：
<p-dropdown style="width: 100%"></p-dropdown>
现在让我们看看它们是如何解释的：
情况1：
这告诉 angular 查找 属性 调用的样式并为其赋值。现在，要理解我的意思 - 考虑一下，Lefthand="Righthand" - 在您创建的所有自定义 angular 元素中，右侧站点是在您的应用程序某处定义的已知 object/function。通常在您的 class.ts 中。因此，要提供一个值而不是对某些 object/function 的引用，您必须进一步用单引号覆盖 righthand，例如 - "'righthand'"。 Angular 将其视为值而不是引用。这就是此选项有效的原因。
案例二：
案例二在编程上看起来是有效的，但对 angular 而言并非如此，除非如上文案例 1 的解释所述，righthand 上提供的内容是 object/function。请记住，在所有自定义元素中，angular 将检查所有内容以查找它在呈现该元素的模板时必须操作和应用的任何引用变量、对象或函数。因此，当它尝试处理您提供的那个元素时，它会得到一个对象 width: 100%，它无法在应用程序的任何位置找到该对象。因此它抛出了一个错误。
Regarding this - Angular doesn't have to do anywork, because this is a valid html element and normal html syntax apply. Angular doesn't have to render anything for
<button>because it's an html element and not an angular element/component whose selector is defined.
希望您觉得这有用。
我喜欢 Angular - 让我们使用它，因为它是最好的。
我不知道 Angular，但是
<p-dropdown [style]="{'width': '100%'}"></p-dropdown>
看起来像 Angular 的特定语法。因此，遵循语法的语法结构很重要。在这种情况下，有必要将样式嵌套在方括号中，并将宽度嵌套在花括号中，例如 json 对象。
<button style="width: 100%"></button>
是原生 HTML 语法，因此这种内联样式语法工作得很好。如果你这样做，这将不起作用：
<button [style]="{'width: 100%'}"></button>
因为如前所述，这种语法只适用于 Angular。