Угловая 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?