css涂鸦投掷错误与角度？

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

---

有没有办法在angular中使用css涂鸦？

要让这个库在angular中使用，您必须采取以下几个步骤

npm安装css涂鸦-保存

我在cli创建的默认应用程序中执行了以下步骤，您必须更新这些步骤，以确保在项目的正确模块/组件中完成所有操作

app.component.html

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

app.component.ts

---

还有另一种方法可以通过使用“使用”属性来避免此类错误，该属性允许您在普通CSS文件中编写规则：

例如：

css涂鸦{ -规则： ：涂鸦{ @网格：10/100%； } 背景：@pick ff0198、8156a8、ff6d00、ff75e4 ; 转换：翻译 @兰德-50vw，50vw， @兰德-50vh，50vh ; @尺寸：3.5vmin； @形状：心脏； @放置单元：50%50%； 动画名称：爆炸； 动画迭代次数：无限； 动画方向：反向； 动画持续时间：calc@rand2s、5s、.1； 动画延迟：calc@rand-5s，-1s，.1； 动画计时功能： 立方贝塞尔曲线.84,02,1,1； @关键帧爆炸{ 0%{不透明度：0；} 70%{不透明度：1；} 100%{转换：translate0，0；} } ; } 请参见此处的演示：

---

在插值{{}中使用引号对我不起作用，而且这种方法没有太多可读性和动态性，尽管使用样式规则有帮助，但这种方法更静态，而且我无法动态生成值。我遵循了JSAPI更新方法，这非常有效

现在我可以将这段代码包装在一个组件中，接受规则作为@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涂鸦软件包见下面的答案我在中尝试了你的解决方案，并且效果良好。@ConnorsFan你的stackblitz应用程序抛出的“customElements”不是defined@zgue-我从stackblitz中删除了一个无用的allo变量。不过，我看不出你提到的错误。@ConnorsFan你说得对，它工作正常。也许我用错浏览器了。

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

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

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';
}

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