Question

我正在尝试在Angular 5中构建一个步进器作为练习，但我完全不知道如何解决这个问题。基本上，我希望能够创建X步骤的步进器，并呈现每个步骤的内容。现在，每个步骤都呈现为[Object object]而不是元素之间的文本。如何在父模板中渲染步骤的内容？

以下是我的组件：

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

@Component({ 
  selector: 'step',
  template: `<ng-content></ng-content>`
})
export class Step {
  constructor () { }
}

@Component({
  selector: 'stepper',
  template: `
    <ul class="stepper stepper-horizontal">
      <li *ngFor="let step of steps; index as i"
        [ngClass]="{
          active: idx === (i + 1),
          completed: idx > (i + 1)
        }">
        <a>
          <span class="circle">
            {{i + 1}}
          </span>
          <span class="label">
            {{ step }}
          </span>
        </a>
      </li>
    </ul>
  `
})
export class Stepper {
  @ContentChildren(Step)
  readonly steps: QueryList<Step>;

  private idx: number = 1;

  constructor () { }

  next () {
    if (this.idx < this.steps.length) this.idx++;
  }

  prev () {
    if (this.idx > 1) this.idx--;
  }
}

这是我想写的模板的一个例子：

<stepper>
  <step>Step 1</step>
  <step>Step 2</step>
  <step>Step 3</step>
</stepper>

Answer 1

不确定是否有更优雅的答案，但这有效：

@Directive({ selector: 'step' })
export class Step {
  constructor (private element: ElementRef) { }

  get text () { return this.element.nativeElement.innerText; }
}

然后在步进器中渲染{{step.text}}。如果有更好的方式，我很想知道！

在父模板

1 个答案: