小编Fly*_*yii的帖子

Angular如何延迟/错开子组件内的动画

我有一个带动画的子组件

child.component.ts

@Component({
  selector: 'child',
  animations:[
    // animations
   ]
})
export class ChildComponent { ... }
Run Code Online (Sandbox Code Playgroud)

还有一个父组件,它在html中有2个子组件

parent.component.hmtl.ts

...
<child></child>
<child></child>
...
Run Code Online (Sandbox Code Playgroud)

Stackblitz示例

我想要实现的是错开父组件中子组件的动画.因此,第二个子组件应在X秒后开始动画.

animateChild()听起来可能有用,但我无法弄清楚如何使用它.这是正确的解决方案吗?如果是这样,一个例子真的很有帮助.

提前致谢

编辑:animateChild()似乎不适用于这种情况.看起来它只适用于父组件中定义的动画.

编辑2:我认为可能有一个解决方法是在子组件内部添加动画延迟.

child.component.ts

@Component({
  selector: 'child',
  animations:[
    animate(x),
    // animations
   ]
})
export class ChildComponent { ... }
Run Code Online (Sandbox Code Playgroud)

x将是一个为每个子组件增加的变量.这种解决方法对我来说有点混乱

EDIT3:到目前为止,anwers或多或少是我在第二次编辑中提到的解决方案.虽然这些确实有用,但我仍然认为这些是解决方法.

我正在寻找一个只涉及父组件的解决方案,因此子组件应该保持在这个非工作示例中的样子

angular angular-animations

15
推荐指数
1
解决办法
1267
查看次数

打字稿:使 tsconfig 发出一个文件夹而不是另一个文件夹

我正在将现有项目从 js 转换为打字稿。我希望能够noEmit = true在一个文件夹上设置但让另一个文件夹具有noEmit = false.

原因是我通过 webpack 设置了我的客户端(angular)代码并且不需要打字稿来为我生成 javascript。而服务器(Node/express)仍然需要生成为 javascript。

我尝试了几种不同的组合,但似乎还没有找到正确的方法。

我能够开始工作的唯一解决方案是拥有两个tsconfig.json并运行类似的命令tsc -p src\server\tsconfig && tsc -p src\client\tsconfig

我意识到这不是一个好的解决方案,但我没有得到一个单一的 tsconfig 工作,也没有一个基本的 tsconfig。

这是文件夹结构..

|-Src
|--/client
|--/server
Run Code Online (Sandbox Code Playgroud)

有没有办法使用单个 tsc 命令来实现这一点?或者有更好的方法来格式化项目吗?谢谢!!

javascript node.js typescript webpack angular

6
推荐指数
1
解决办法
1436
查看次数

如何使用角度编辑器上传图像并附加文档

我安装了 Angular 编辑器包并且 Angular 编辑器正在工作,但我无法上传 Word 文档、演示文稿和图像

我从https://www.npmjs.com/package/@kolkov/angular-editor安装了角度编辑器

import { Component, OnInit } from '@angular/core';
import { AngularEditorConfig } from '@kolkov/angular-editor';
import {BlogService} from 'src/app/service/blog.service';
@Component({
  selector: 'app-blog',
  templateUrl: './blog.component.html',
  styleUrls: ['./blog.component.css']
})
export class BlogComponent implements OnInit {

  editorConfig: AngularEditorConfig = {
    editable: true,
    spellcheck: true,
    height: '25rem',
    minHeight: '5rem',
    placeholder: 'Enter text here...',
    translate: 'no',
   uploadUrl: '/home/web/Pictures', // if needed
    customClasses: [ // optional
      {
        name: "quote",
        class: "quote",
      },
      {
        name: 'redText',
        class: 'redText'
      },
      { …
Run Code Online (Sandbox Code Playgroud)

editor angular

1
推荐指数
1
解决办法
6583
查看次数