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!
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);
Comments
Post a Comment