javascript - How to provide a parent's model to a dynamically loaded child component in angular 2? -

i have many directives built in angular 1.x application. directives used various internal applications @ company. i'd applications not have change code, instead abstract many of syntax changes within directives upgrade angular 2.x. example let's have following directive:

<my-directive     my-first-attribute="vm.someproperty"      my-second-attribute="vm.somefunction()" ></my-directive> 

assume can't change syntax parent component's perspective attributes need transformed like:

[myfirstattribute]="vm.someproperty" (click)="vm.somefunction()" 

there used compile function make many of these template changes before linking. i've got constructor function can pull in elementref, , dynamiccomponentloader

however, how can provide vm dynamically loaded component?

i've tried:

this._loader.loadintolocation(subcmp, this._el, 'container') .then((compref:componentref) => {   compref.instance.vm = this.vm; }); 

but component leverages dynamiccomponentloader doesn't know vm. don't want change html syntax invokes component in turns dynamically loads own child components. here current plunkr, using angular 2 beta 15.

the reason forgot brackets []:

[model]="model.firstname" 

if forget brackets, angular treats string constant , initializes target property string. not evaluate string!

see doc, plunkr

assuming can not change templates there no clean ways fulfill requirements. not recommend using it, wanted try angular-expressions library, check plunkr

idea parent context through injector hierarchy , parse expressions manually.

//i don't understand why component index 0 var context = injector.parent.getat(0);  //create parser this.model expression, i.e. 'model.firstname' var evaluate = angularexpressions.compile(this.model);  //apply value context comp.model = evaluate(context);