Question

我正在研究一个简单的步进器

但是我在如何处理内部事件方面陷入困境

ng-content。我尝试了一个没有运气的指令。

我想使用appStepperNext和appStepperBack to

处理点击事件以在不同步骤中导航

我将其放在StepComponent中，但我想在其中处理

StepperComponent

步进

    import {
      AfterContentInit,
      Component,
      ContentChildren,
      QueryList
    } from '@angular/core';

    import { StepComponent } from './step/step.component';

    @Component({
      selector: 'app-stepper',
      template: `
        <ul class="stepper">
          <ng-container *ngFor="let step of steps; let i = index; let last = last">
            <li (click)="selectStep(step)">
              <button mat-mini-fab color="primary" [disabled]="!step.active">
                {{ i + 1 }}
              </button>
            </li>

            <li class="line" *ngIf="!last"></li>
          </ng-container>
        </ul>
        <ng-content></ng-content>
      `,
      styleUrls: ['./stepper.component.scss']
    })
    export class StepperComponent implements AfterContentInit {
      @ContentChildren(StepComponent) steps: QueryList<StepComponent>;

      // contentChildren are set
      ngAfterContentInit() {
        // get all active steps
        const activeSteps = this.steps.filter(step => step.active);

        // if there is no active step set, activate the first
        if (activeSteps.length === 0) {
          this.selectStep(this.steps.first);
        }
      }

      selectStep(step: StepComponent) {
        // deactivate all steps
        this.steps.toArray().forEach(step => {
          step.active = false;
        });

        // activate the step the user has clicked on.
        step.active = true;
      }
    }

步骤

    import {
      AfterContentInit,
      Component,
      ContentChildren,
      Input,
      QueryList
    } from '@angular/core';

    import { StepperNextDirective } from './stepper-next.directive';

    @Component({
      selector: 'app-step',
      template: `
        <div [hidden]="!active">
          <ng-content></ng-content>
        </div>
      `,
      styleUrls: ['./step.component.scss']
    })
    export class StepComponent implements AfterContentInit {
      @Input() active = false;
      @ContentChildren(StepperNextDirective) dirs: QueryList<StepperNextDirective>;
      ngAfterContentInit() {
        console.log(this.dirs);
      }
    }

Dir

    import { Directive } from '@angular/core';

    @Directive({
      selector: '[stepperNext]'
    })
    export class StepperNextDirective {

      constructor() { }

    }

用法

    <app-stepper>
      <app-step>
        Step 1 Content
        <button appStepperNext>Next</button>
      </app-step>
      <app-step>
        Step 2 Content
        <button appStepperBack>Back</button>
        <button appStepperNext>Next</button>
      </app-step>
      <app-step>
        Step 3 Content
        <button appStepperNext>Back</button>
        <button mat-button>Submit</button>
      </app-step>
    </app-stepper>

在@Bunyamin Coskuner回复后更新

import { Directive, HostListener, Attribute } from '@angular/core';

import { IwdfStepperComponent } from './stepper.component';

@Directive({
  selector: '[iwdfStepperNext]'
})
export class StepperNextDirective {
  @HostListener('click') onClick() {
    this.stepper.next(this.current);
  }
  constructor(
    @Attribute('current') public current: number,
    private stepper: IwdfStepperComponent
  ) {}
}

下一个

Answer 1

我为自己创建了相同的组件，并实现了您要尝试执行的操作。

这是您的操作方式。

您需要在按钮指令中定义一些事件并注入StepperComponent。另外，在next中定义一个StepperComponent方法。

此外，请确保模板中没有错字。我已将选择器更改为[appStepperNext]

@Directive({
  selector: '[appStepperNext]'
})
export class StepperNextDirective {

  constructor(private _stepper: StepperComponent) { }

  @HostListener('click')
  onClick() {
    this._stepper.next();
  }

}

角度如何处理ng-content内部的事件

1 个答案: