如何控制来自父组件的多个指令？

Posted 2023-02-23

【中文标题】如何控制来自父组件的多个指令？

【英文标题】：How do I control multiple directives from a parent component?

【发布时间】：2019-12-17 08:30:48

【问题描述】：

我有一个 app-landing 组件和多个 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() 

  

【参考方案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>

当你完成输入并订阅上一个指令的这个事件时，从指令中发出一个事件。