Угловая 5: Компонентная заводская привязка

Я использую фабрику компонентов для загрузки различных компонентов через Block вход, в котором указываются характеристики блока - внутренние переменные. Затем, в зависимости от установленных переменных, фабрика будет загружать различные компоненты.

Вот мой код для фабрики

import { Directive, Input, AfterContentInit, ComponentFactoryResolver, ViewChild, ViewContainerRef, Component } from '@angular/core';

import { GreenBlock } from './Blocks/GreenBlock';
import { BlueBlock } from './Blocks/BlueBlock';
import { YellowBlock } from './Blocks/YellowBlock';
import { Block } from './Block';


@Component({
  selector: 'block-factory',
  template: '<div #container></div>',
})
export class BlockFactory implements AfterContentInit  {

  @Input() block: Block;

  @ViewChild('container', {read: ViewContainerRef}) container;

  constructor(public resolver: ComponentFactoryResolver) 
  { 

  }

  ngAfterContentInit() {

    var content;

    switch(this.block.Type) 
    {
      case "yellow":
        content = this.resolver.resolveComponentFactory(YellowBlock);
      break;

      case "blue":
        content = this.resolver.resolveComponentFactory(BlueBlock);
      break;

      case "green":
        content = this.resolver.resolveComponentFactory(GreenBlock);
      break;

      default:
        content = this.resolver.resolveComponentFactory(YellowBlock);
      break;
    }

    let componentRef = this.container.createComponent(content);
    componentRef.instance.block = this.block;
  }
}

Затем, чтобы вызвать эту фабрику через HTML, я использую следующую запись:

<block-factory (ngModel)="newBlock" [block]="newBlock" style="margin:10px 5px;" ></block-factory>

newBlock соответствует блоку (класс, содержащий некоторую информацию, связанную с блоком), таким образом, в зависимости от того, какой набор блок на экране будет выглядеть по-разному.

Теперь это newBlock меняется в зависимости от того, что человек выбирает из выпадающего списка. Смотрите следующую функцию:

// Set the new block via what is clicked in the dropdown box
setNewBlock(block) 
{
  this.newBlock = block;
}

Довольно простая функция. Теперь, как и ожидалось, newBlock не будет обновляться с новым "внешним видом", потому что Angular не может выяснить какие-либо привязки, если они не являются статическими компонентами. У меня вопрос - как я могу сделать функцию привязки Angulars?

0 ответов

Другие вопросы по тегам