css 涂鸦抛出 Angular 错误？

Question

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

有没有办法在 Angular 上使用 css 涂鸦？

Answer 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 中的一个特殊字符，如果您想在 View 中使用它，则必须正确转义它。如您所见，整个 css block 都包含在 {{''}} 中以进行转义。

一旦你这样做了，你会得到另一个错误，这个错误与你正在使用 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 文件。有多种方法可以解决此问题。我为概念验证采用的最简单方法是使用 import 'css-doodle'; 将该 npm 模块导入到组件中。

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