css doodle用角度抛出错误？答案

【问题标题】：css doodle throwing errors with angular?css doodle用角度抛出错误？
【发布时间】：2021-01-14 14:46:04
【问题描述】：

https://codepen.io/tuckermassad/pen/rPYNLq

我将 CSS 涂鸦代码从那里复制到我的 Angular 组件中：

<section class="main">
    <css-doodle grid="5">
        :doodle {
          @grid: 10 / 100%; 
        }
        background: @pick(
          #ff0198, #8156a8, #ff6d00, #ff75e4
        );

        transform: translate(
          @rand(-50vw, 50vw),
          @rand(-50vh, 50vh)
        );

        @size: 3.5vmin;
        @shape: heart;
        @place-cell: 50% 50%;

        animation-name: explosion;
        animation-iteration-count: infinite;
        animation-direction: reverse;
        animation-duration: calc(@rand(2s, 5s, .1));
        animation-delay: calc(@rand(-5s, -1s, .1));
        animation-timing-function: 
          cubic-bezier(.84, .02, 1, 1);

        @keyframes explosion {
          0% { opacity: 0; }
          70% { opacity: 1; }
          100% { transform: translate(0, 0); }
        }
      </css-doodle>
</section>

现在，我使用npm i css-doodle 安装了 css-doodle，然后我运行了该项目，但出现以下错误：

compiler.js:2547 Uncaught Error: Template parse errors:
Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) ("
        }
      </css-doodle>
</section>[ERROR ->]"): ng:///AppModule/HomeComponent.html@32:10
Invalid ICU message. Missing '}'. ("
        }
        background: @pick(
          #ff0198, #8156a8, [ERROR ->]#ff6d00, #ff75e4
        );

"): ng:///AppModule/HomeComponent.html@6:28
Invalid ICU message. Missing '}'. ("
        }
      </css-doodle>
</section>[ERROR ->]"): ng:///AppModule/HomeComponent.html@32:10

有没有办法以角度使用 css doodle？

【问题讨论】：

在您的 Angular 项目中安装 css-doodle 包，请参阅下面的答案

标签： css angular css-doodle

【解决方案1】：

要让这个库与 Angular 一起工作，您必须采取几个步骤。

npm install css-doodle --save

我在 cli 创建的默认应用程序中执行的以下步骤，您必须更新它们以确保一切都在您项目的正确模块/组件中完成。

app.component.html

<section class="main">
  <css-doodle grid="5">
    {{'
      :doodle {
        @grid: 10 / 100%;
      }
      background: @pick(
        #ff0198, #8156a8, #ff6d00, #ff75e4
      );

      transform: translate(
        @rand(-50vw, 50vw),
        @rand(-50vh, 50vh)
      );

      @size: 3.5vmin;
      @shape: heart;
      @place-cell: 50% 50%;

      animation-name: explosion;
      animation-iteration-count: infinite;
      animation-direction: reverse;
      animation-duration: calc(@rand(2s, 5s, .1));
      animation-delay: calc(@rand(-5s, -1s, .1));
      animation-timing-function:
        cubic-bezier(.84, .02, 1, 1);

      @keyframes explosion {
        0% { opacity: 0; }
        70% { opacity: 1; }
        100% { transform: translate(0, 0); }
      }
      '}}
    </css-doodle>
</section>

正如您在上面看到的（并在您发布的错误中列出），{ 是 Angular 中的一个特殊字符，如果您想在视图中使用它，必须正确转义它。如您所见，整个 css 块被封装在 {{''}} 中，以便进行转义。

一旦你这样做了，你会得到另一个错误，因为你正在使用一个 Angular 不知道的自定义 HTML 元素。为了解决这个问题，您必须进入您的模块并将schemas: [CUSTOM_ELEMENTS_SCHEMA] 添加到您的模块中。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

之后，还有一个步骤。现在您不会收到来自 Angular 的任何错误，但您的组件不会按预期呈现。那是因为 Angular 没有加载上面的 npm install 安装的 javascript 文件。有多种方法可以解决此问题。我为概念验证采用的最简单方法是将该 npm 模块导入到带有 import 'css-doodle'; 的组件中。

app.component.ts

import { Component } from '@angular/core';
import 'css-doodle';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'ng-css-doodle';
}

Full GitHub repo example

【讨论】：

我在this stackblitz 中尝试了您的解决方案，它有效。
@ConnorsFan 你的 stackblitz 应用抛出“'customElements' is not defined”
@zgue - 我从堆栈闪电战中删除了一个无用的allo 变量。但是，我没有看到您提到的错误。
@ConnorsFan 你是对的，它工作正常。也许我用错误的浏览器尝试过。

【解决方案2】：

还有另一种方法可以通过使用use 属性来避免此类错误，它可以让您在普通的CSS 文件中编写规则：https://css-doodle.com/#property-@use

例如：

<style>
  css-doodle {
    --rule: (
      :doodle {
        @grid: 10 / 100%;
      }
      background: @pick(
        #ff0198, #8156a8, #ff6d00, #ff75e4
      );

      transform: translate(
        @rand(-50vw, 50vw),
        @rand(-50vh, 50vh)
      );

      @size: 3.5vmin;
      @shape: heart;
      @place-cell: 50% 50%;

      animation-name: explosion;
      animation-iteration-count: infinite;
      animation-direction: reverse;
      animation-duration: calc(@rand(2s, 5s, .1));
      animation-delay: calc(@rand(-5s, -1s, .1));
      animation-timing-function:
        cubic-bezier(.84, .02, 1, 1);

      @keyframes explosion {
        0% { opacity: 0; }
        70% { opacity: 1; }
        100% { transform: translate(0, 0); }
      }
    );
  }
</style>

<css-doodle use="var(--rule)"></css-doodle>

在此处查看演示：
https://codepen.io/yuanchuan/pen/a07d7bebf04b35b9752e31e970ecd68c

【讨论】：

【解决方案3】：

在插值 {{''}} 中使用引号对我不起作用，而且该方法的可读性和动态性不高，尽管使用样式规则有所帮助，但该方法是更静态的方法，而且我无法动态生成值.我遵循了 JS API 更新方法，效果很好。

现在我可以将此代码包装在一个组件中，接受规则作为@Input 属性，将其他api导出为组件方法，现在这个组件可以共享和重用。

  ngAfterViewInit() {
    this.initDoodle();
  }

  initDoodle() {
    /* you can add typing in your code to avoid use of any */
    const doodle = document.querySelector('css-doodle') as any; 

    /* update styles and refresh */
    doodle.update(`
      @grid: 10 / 100vw 100vh;
      :doodle {
        background-color: #182F53;
      }

      transition: .2s @r(.6s);
      border-radius: @r(100%);
      will-change: transform;
      transform: scale(@r(.15, 1.25));

      background: hsla(calc(240 - 6 * @row * @col), 70%, 68%, @r1);
    `);

    /* just refresh */
    doodle.update();
  }

【讨论】：