Question

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

我从那里将CSS Doodle代码复制到了我的角度组件中：

<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？

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中的特殊字符，如果要在视图中使用它，必须对其进行正确的转义。如您所见，整个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安装中安装的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

Answer 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

Answer 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();
  }

CSS Doodle与角度抛出错误？

3 个答案: