Question

我试图了解如何使用Angular合成。我的情况是我有一个问题列表，每个问题都有一个类型。根据该类型，模板的一部分会更改。理想情况下，我想我需要一个带有其自己模板的基本组件，该模板具有一个ng-content占位符，派生组件会将其特定内容注入到父组件中。我是否需要将子模板创建为指令？这就是我到目前为止所拥有的。

外部模板

<questionnaire>
    <div *ngFor="let question of questions" [ngSwitch]="question.type">
        <question-type-a *ngSwitchCase="'A'" [question]="question"</question-type-a>
        <question-type-a *ngSwitchCase="'B'" [question]="question"</question-type-b>
        <question-type-a *ngSwitchCase="'C'" [question]="question"</question-type-c>
    </div>
</questionnaire>

问题组件

@Component({
  selector: 'question',
  templateUrl: './question.component.html'
})
export class QuestionComponent implements OnInit {
  @Input() question: IQuestion;

  constructor() { }

question.component.html模板

<div>
    <ng-container #details></ng-container>
    <button>do something</button>
</div>

问题类型模板

<ng-template #mydetails>
   <button>Answer Question</button>
</ng-template>

问题类型组件

@Component({
  selector: 'question-type-a',
  templateUrl: './question-type-a.html'
})
export class QuestionTypeAComponent extends QuestionComponent implements OnInit, AfterViewInit {
  @ViewChild("details", { read: ViewContainerRef }) details: 
ViewContainerRef;
   @ViewChild("mydetails") mydetails: TemplateRef<any>;
  @Input() question: IQuestion;

  constructor() {
    super();
  }

  ngOnInit() {
  }

  ngAfterViewInit(): void {
    let view = this.yesnotdetails.createEmbeddedView(null);
    this.details.insert(view);
  }
}

最后，我试图了解如何将#mydetails从派生组件放入基本组件的#details容器中。显然，这不是正确的方法。我一直在寻找嵌入式模板和派生组件，但是我不太了解如何完成我正在尝试做的事情，或者找不到一个符合我所需要的示例。什么是正确的构建方式，这样我可以有一个主模板和一个派生模板？

Answer 1

您可以在角度中使用content projection。

示例：

QuestionContainerComponent

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

@Component({
  selector: 'question-container',
  template: `
    <div class="question-container">
      <ng-content></ng-content>
    <div>`,  
})
export class QuestionContainerComponent  {}

QuestionComponent

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

@Component({
  selector: 'question',
  template: `
    <div class="question">
      {{model}}
    <div>`,  
})
export class QuestionComponent  {
  @Input() model : any;
}

AppComponent

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

@Component({
  selector: 'my-app',
  template: `
    <question-container>
      <div *ngFor="let question of questions" [ngSwitch]="question.type">
        <question *ngSwitchCase="1" [model]="question.value"></question>
        <question *ngSwitchCase="2" [model]="question.value"></question>
      </div>  
    </question-container>
  `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
    questions: any[] = [
      { type: 1, value: 'My question 01'},
      { type: 2, value: 'My question 02'},
      { type: 3, value: 'My question 02'},
      { type: 4, value: 'My question 02'},
    ];
}

从派生组件到基础组件的角形嵌入模板

1 个答案: