从派生组件到基础组件的角度嵌入模板答案

【问题标题】：Angular embedding template from derived component to base component从派生组件到基础组件的角度嵌入模板
【发布时间】：2019-08-08 07:56:33
【问题描述】：

我正在尝试了解如何使用 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>

question-type-a 组件

@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 容器中。显然这不是正确的方法。我一直在搜索嵌入式模板和派生组件，但我无法完全理解如何完成我正在尝试做的事情或找到一个符合我认为我需要的示例。构建这个的正确方法是什么，以便我可以拥有一个主模板和一个派生模板？

【问题讨论】：

标签： angular angular2-template angular-directive

【解决方案1】：

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

例子：

问题容器组件

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

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

问题组件

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

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

应用组件

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'},
    ];
}

【讨论】：