1

升级到 Angular 9 后，我得到一个奇怪的编译器错误。我已经更新了 4 个项目，其中 3 个没有任何问题，但最后一个抛出了这个错误：

ERROR in Error: [class] and [className] bindings cannot be used on the same element simultaneously
    at StylingBuilder.registerClassInput (C:\Users\kschramm\Documents\arzneimittel-wechsler\node_modules\@angular\compiler\bundles\compiler.umd.js:13564:27)
    at StylingBuilder.registerInputBasedOnName (C:\Users\kschramm\Documents\arzneimittel-wechsler\node_modules\@angular\compiler\bundles\compiler.umd.js:13527:36)
    at StylingBuilder.registerBoundInput (C:\Users\kschramm\Documents\arzneimittel-wechsler\node_modules\@angular\compiler\bundles\compiler.umd.js:13503:36)
    at C:\Users\kschramm\Documents\arzneimittel-wechsler\node_modules\@angular\compiler\bundles\compiler.umd.js:17296:57
    at Array.forEach (<anonymous>)
    at TemplateDefinitionBuilder.visitElement (C:\Users\kschramm\Documents\arzneimittel-wechsler\node_modules\@angular\compiler\bundles\compiler.umd.js:17295:28)
    at Element.visit (C:\Users\kschramm\Documents\arzneimittel-wechsler\node_modules\@angular\compiler\bundles\compiler.umd.js:4268:71)
    at visitAll (C:\Users\kschramm\Documents\arzneimittel-wechsler\node_modules\@angular\compiler\bundles\compiler.umd.js:4435:40)
    at TemplateDefinitionBuilder.buildTemplateFunction (C:\Users\kschramm\Documents\arzneimittel-wechsler\node_modules\@angular\compiler\bundles\compiler.umd.js:16982:13)
    at C:\Users\kschramm\Documents\arzneimittel-wechsler\node_modules\@angular\compiler\bundles\compiler.umd.js:17558:60
    at C:\Users\kschramm\Documents\arzneimittel-wechsler\node_modules\@angular\compiler\bundles\compiler.umd.js:16992:81
    at Array.forEach (<anonymous>)
    at TemplateDefinitionBuilder.buildTemplateFunction (C:\Users\kschramm\Documents\arzneimittel-wechsler\node_modules\@angular\compiler\bundles\compiler.umd.js:16992:37)
    at C:\Users\kschramm\Documents\arzneimittel-wechsler\node_modules\@angular\compiler\bundles\compiler.umd.js:17558:60
    at C:\Users\kschramm\Documents\arzneimittel-wechsler\node_modules\@angular\compiler\bundles\compiler.umd.js:16992:81
    at Array.forEach (<anonymous>)

我不知道是什么导致了这个错误，有人知道吗？

4

4 回答 4

4

我检查了我的代码并找到了错误的原因。这是一个带有两个常规类装饰器的 html 元素。只是一个简单的复制问题，但常春藤似乎不喜欢它：D

于 2020-02-11T09:12:16.910 回答
2

在您的项目中搜索每个包含 [class] AND [className] 的 html 元素。就我而言，它是一个较旧的插件（在 node_modules 中），尚未适应 Angular 9。在我删除 [className] （我不需要它）之后，它运行良好。提示是编译在有错误的插件处停止。

于 2020-02-10T20:16:44.773 回答
1

我遇到了一个问题，我必须在大型应用程序中追踪双类的发生（哎呀）。vs-code 中的这个正则表达式帮助了很多。

启用正则表达式搜索：

class=".*".*class  // single line
class=".*"[^>\r\n]*(\r\n|\r|\n)[^>\r\n]*class // class on a new line
class=".*"[^>\r\n]*(\r\n|\r|\n)[^>\r\n]*(\r\n|\r|\n)[^>\r\n]*class // class on the second line away

我不确定处理变量行上出现的类的好方法，所以我只是[^>\r\n]*(\r\n|\r|\n)在第二个class关键字之前添加了另一个迭代。

希望它可以帮助别人！

于 2020-09-07T22:35:15.157 回答
1

错误很明显，但很难找到它究竟是在哪里产生的。

在我的情况下，有问题的模板类似于：

<div class="classA {{ some_object.propertyB }}"
     [class.classC]="some_object.propertyC">

我已将其修复为：

<div class="classA" [ngClass]="{
     'classX': some_condition,
     'classC': some_object.propertyC}">

基本上，我不得不将所有绑定移动到一个ngClass.

一个可能有用的链接：

于 2020-05-05T11:07:29.707 回答