如何从父组件控制多个指令？

Question

我有一个应用程序着陆组件和多个 typeOut 指令。 TypeOut指令负责在其元素中编写某些内容。 那行得通，现在我想控制以什么顺序写出什么内容。

我希望应用程序登陆（或具有typeOut指令的任何父组件）具有typeOut指令数组，并能够调用其函数以按顺序键入文本。

我尝试使用输入，输出和服务，但不确定自己在做什么。

landing.component.ts

  <h1 class="fontSize1">
    <p style="display:none;">{{title.string}}</p>
    <strong>
      <pre typeOut="{{title.ascii}}" typeClump="10" typeOrder="1" typeDelay="0.1"></pre>
    </strong>
  </h1>
  <h2 class="fontSize1">
    <p style="display:none;">{{subtitle.string}}</p>
    <pre typeOut="{{subtitle.ascii}}" typeOrder="1" typeDelay="1"></pre>
  </h2>
</header>
<aside class="portrait">
  <pre class="fontSize2" typeOut="{{portrait.ascii}}" typeClump="10" typeOrder="1" typeDelay="0.1"></pre>
</aside>

type-out.directive.ts

import { Directive, Input, ElementRef, Output, EventEmitter } from '@angular/core';
import { delay, asyncForEach } from '../async';

export interface typeOutObj { order: number, write: any, finished: boolean };

@Directive({
  selector: '[typeOut]'
})
export class TypeOutDirective {
  private dom;
  @Input('typeOut') text: string;
  @Input('typeClump') clump: number;
  @Input('typeOrder') order: number;
  @Input('typeDelay') delay: number;
  @Output() typeObj = new EventEmitter<typeOutObj>();
  typeFinished: boolean;
  charArr = [];


  write = async () => {
    let clump = {
      max: this.clump == undefined ? 0 : this.clump,
      current: 0
    }

    await asyncForEach(this.charArr, async (char) => {
      if (this.typeFinished == false) {
        if (clump.current >= clump.max) {
          clump.current = 0;
          await delay(this.delay == undefined ? 0 : this.delay);
        }
        clump.current++;
        this.dom.innerHTML += char;
      }
    });
  }



  constructor(el: ElementRef) {
    this.dom = el.nativeElement;
    this.dom.innerHTML = '';
    this.typeFinished = false;
  }
  ngAfterContentInit() {
    this.charArr = this.text.split('');
  }

  ngAfterViewInit(): void {
    this.write().then(() => {
      this.typeFinished = true;

      this.typeObj.emit({
        order: this.order,
        write: this.write(),
        finished: this.typeFinished
      });
    });
  }

  ngOnInit() {

  }

}

type-out.service.ts （不确定我是否会正确地使用它）

import { Injectable, Input } from '@angular/core';
import { typeOutObj } from './type-out.directive';

@Injectable({
  providedIn: 'root'
})
export class TypeOutService {
  @Input() typeOut: typeOutObj;

  typeOuts: [typeOutObj];

  constructor() {

  }
}

Answer 1

您可以尝试做类似连锁的事情。试试这个

@Output() typingFinished = new EventEmitter<Any>();
@Input() previous;

，然后将对前一个元素的引用传递给您的指令。

<pre typeOut="{{title.ascii}}" typeClump="10" typeOrder="1" typeDelay="0.1" #firstDirective></pre>
<pre typeOut="{{subtitle.ascii}}" typeOrder="1" typeDelay="1" #secondDirective [previous]="firstDirective"></pre>
<pre typeOut="{{subtitle.ascii}}" typeOrder="1" typeDelay="1" #thirdDirective [previous]="secondDirective "></pre>

输入完指令并订阅上一个指令的事件后，从指令中发出事件。