具有不同但相似数据模型的Quiz组件

Question

我有一个带有这个模板的组件：

<ion-card *ngIf="isActive">
  <ion-card-header>{{question.question}}</ion-card-header>

  <ion-grid>
    <ion-row>
      <ion-col *ngFor="let answer of question.answers">
        <button ion-button outline (click)="answer.action()">{{answer.text}}</button>
      </ion-col>
    </ion-row>
  </ion-grid>

</ion-card>

守则如下：

@Component({
  selector: 'extra-card',
  templateUrl: 'extra-card.html'
})
export class ExtraCard {
  public static readonly EXTRA_CARD_TYPE_1: string = "type_1";
  public static readonly EXTRA_CARD_TYPE_2: string = "type_2";

  @Input() type: string = ExtraCard.EXTRA_CARD_TYPE_1;

  isActive: boolean = true;
  question;

  constructor(
    private ga: GoogleAnalytics,
    private socialSharing: SocialSharing,
    private appRateService: AppRateService
  ) {}

  ngOnInit() {
    switch (this.type) {
      case ExtraCard.EXTRA_CARD_TYPE_1:
        this.makeExtraCardType1();
        break;

      case ExtraCard.EXTRA_CARD_TYPE_2:
        this.makeExtraCardType2();
        break;
    }
  }

  private makeExtraCardType1() {
    this.question = {
      question: "Some question",
      answers: [
        {text: "Answer 1", action: () => {this.action1Type1();}},
        {text: "Answer 2", action: () => {this.action2Type1();}},
        {text: "Answer 3", action: () => {this.action3Type1();}}
      ]
    };
  }

  private makeExtraCardType2() {
    this.question = {
      question: "Some question",
      answers: [
        {text: "Answer 1", action: () => {this.action1Type2();}},
        {text: "Answer 2", action: () => {this.action2Type2();}},
      ]
    };
  }

...

}

这段代码是做什么的？

向用户显示一系列问题。每个问题都有几个选择。在序列的末尾，我们做了一些动作，跳过了这张卡片。

有什么问题？

在这个例子中，我有两种类型的额外卡，但我想要更多(5，10，20等)。在这种情况下，我的组件代码增长得太快了。

我想要什么

我想把不同问题序列的逻辑分开。但我在序列中的一些独特动作上面临依赖注入的问题。我想要一个组件，然后像这样使用它：

<extra-card [type]="type_1"></extra-card>

此外，我希望避免基组件中过多的依赖项注入(在将DI实例传递给问题模型时)。

Answer 1

一些要添加的东西.

伊戈尔的方法肯定是正确的方向，但我有一些东西要补充。

为您的模型

使用接口

在这里，将卡片和应答分给接口是有意义的：

export interface QuestionCard {
  context: Context;
  question: string;
  answers: Answer[];
}

export interface Answer {
  text: string;
  action: () => void;
}

然而，在组件内部，为每一张卡创建类的方法效率低下，毫无意义。该解决方案根本无法扩展@Igor Soloydenko。此外，与类不同的是，接口只需要编译时间，编译后就可以从代码中完全删除。请参阅https://jameshenry.blog/typescript-classes-vs-interfaces/

创建一个服务，即使它是模拟的数据

稍微推动一下，创建一个服务，这是正确的，你最终需要它。

@Injectable()
export class CardService() {
    constructor(private http: Http) {}

    getQuestions(): Observable<QuestionCard[]> {
    return  [{
      question: "Question 1?",
      answers: [
          { text: "Answer 1", action: () => { console.info("Q1-A1"); this.context.ga.doSomething(); }},
          { text: "Answer 2", action: () => { console.info("Q1-A2")}},
          { text: "Answer 3", action: () => { console.info("Q1-A3");}}
        ]
      },
      {
        question: "Question 2?",
        answers: [
            { text: "Answer 1", action: () => { console.info("Q1-A1"); this.context.ga.doSomething(); }},
            { text: "Answer 2", action: () => { console.info("Q1-A2")}},
            { text: "Answer 3", action: () => { console.info("Q1-A3");}}
        ]
        }
      ]
  }
 }

从组件

中的CardService访问数据

@Component({
  selector: 'extra-card',
  templateUrl: 'extra-card.html'
})
export class ExtraCard {
    questions: Question[];
    constructor(private cardService: CardService) {}
    ngOnInit() {
        this.questions = this.cardService.getQuestions();
    }
...
}

在模板

中使用*ngFor迭代问题