时间戳

首页 > 解决方案 > 角度如何处理ng-content中的事件

angular - 角度如何处理ng-content中的事件

问题描述

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

但我被困在如何处理其中的事件

ng-内容。我试过一个没有运气的指令。

我想使用 appStepperNext 和 appStepperBack 来

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

我把它放在 StepComponent 但我想处理它

步进器组件

步进器

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

目录

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

下一个

标签： angular

解决方案

我为自己创建了相同的组件，并实现了您正在尝试做的事情。

这是你如何做到的。

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

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

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

  constructor(private _stepper: StepperComponent) { }

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

}

推荐阅读