Угловой шаблон встраивания из производного компонента в базовый компонент - PullRequest
Новая
       25

Угловой шаблон встраивания из производного компонента в базовый компонент

0 голосов
/ 18 марта 2019

Я пытаюсь понять, как использовать угловую композицию. Моя ситуация такова, что у меня есть список вопросов, каждый из которых имеет свой тип. На основании этого типа часть шаблона изменяется. В идеале я думал, что мне нужен базовый компонент со своим собственным шаблоном, который будет иметь заполнитель 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() { }

template.component.html template 

<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 в базовом компоненте. Очевидно, что это не правильный подход. Я искал во встроенных шаблонах и производных компонентах, но не могу понять, как выполнить то, что я пытаюсь сделать, или найти пример, который соответствует тому, что мне нужно. Как правильно построить это, чтобы у меня был основной шаблон и производный шаблон?

1 Ответ

0 голосов
/ 18 марта 2019

Вы можете использовать проекция контента в угловом формате.

Пример:

QuestionContainerComponent 

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