-1

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

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

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

现在，我用 安装了 css-doodle npm i 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？

4

3 回答 3

2

要让这个库与 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';
}

完整的 GitHub 存储库示例

于 2019-02-22T17:18:50.133 回答
0

还有另一种方法可以通过使用该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

于 2019-02-26T14:22:36.493 回答
0

在插值 {{''}} 中使用引号对我不起作用，而且该方法的可读性和动态性并不高，尽管使用样式规则有所帮助，但该方法是更静态的方法，而且我无法动态生成值。我遵循了 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();
  }
于 2021-01-14T06:46:04.263 回答