Как получить и сделать templateRef условно в Angular 6? - PullRequest
0 голосов
/ 29 августа 2018

У меня есть несколько <ng-template> в моем компоненте. Я хочу выбрать только один шаблон и отобразить его внутри <ng-container>.

Вот мой код:

карта-component.component.ts

@Component({
  selector: 'card-component',
  templateUrl: './card-component.component.html',
  styleUrls: ['./card-component.component.scss']
})
export class CardComponent implements OnInit {
  @Input() layout: string; // this would be the name of the template
                              layout1, layout2, layout3

  layoutRef: any;
  constructor() {}
  ngOnInit() {
     this.layoutRef = // Get templateRef based on this.layout and render it inside <ng-container>
  }
}

карта-component.component.html

<div class="card">
    <ng-container 
        [ngTemplateOutlet]="layoutRef">
    </ng-container>
</div>

<ng-template #layout1>
  this is a template
</ng-template>
<ng-template #layout2>
  this is a template
</ng-template>
<ng-template #layout3>
  this is a template
</ng-template>
<ng-template #layout4>
  this is a template
</ng-template>
<ng-template #layout5>
  this is a template
</ng-template>

Использование

<card-component [layout]="'layout3'"></card-component>

Я знаю, что могу сделать это с ngSwitchCase, но хотел знать, возможно ли это сделать без использования ngSwitchCase.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...