如何在角度2中为动态加载的子组件提供父模型？

Question

我在Angular 1.x应用程序中内置了许多指令。 这些指令被我公司的各种内部应用程序使用。 我希望这些应用程序不必更改其代码，而是在升级到Angular 2.x时在我的指令中抽象出许多语法更改。 例如，假设我有以下指令：

<my-directive
    my-first-attribute="vm.someProperty" 
    my-second-attribute="vm.someFunction()"
></my-directive>

假设我无法从父组件的角度更改该语法，那么这些属性需要转换为以下形式：

[myFirstAttribute]="vm.someProperty"
(click)="vm.someFunction()"

以前有一个编译功能，在链接之前，我可以对其中的许多模板进行更改。 现在，我有了构造函数，可以在其中ElementRef和DynamicComponentLoader

但是，如何为动态加载的组件提供vm ？

我试过了：

this._loader.loadIntoLocation(SubCmp, this._el, 'container')
.then((compRef:ComponentRef) => {
  compRef.instance.vm = this.vm;
});

但是利用DynamicComponentLoader本身的组件并不了解vm 。 我真的不想更改调用该组件的HTML语法，而该语法又会动态加载其自己的子组件。 这是我当前使用Angular 2 beta 15的plunkr 。

Answer 1

原因是您忘记了方括号[] ：

[model]="model.firstName"

如果我们忘记了括号，Angular会将字符串视为常量，并使用该字符串初始化target属性。 它不评估字符串！

看文档 ， plunkr

假设您无法更改模板，则没有干净的方法可以满足您的要求。 我不建议使用它，但是我想尝试angular-expressions库，请检查此plunkr

想法是通过注入器层次结构获取父上下文并手动解析表达式。

//i don't fully understand why component index is 0
var context = injector.parent.getAt(0);

//create parser for this.model expression, i.e. 'model.firstName'
var evaluate = angularExpressions.compile(this.model);

//apply value from context
comp.model = evaluate(context);

Answer 2

使用共享服务与DCL添加的组件进行通信通常是可行的方法。 一些祖先提供服务，并且添加了DCL的组件将其注入

@Injectable()
class Model {
  value:string = 'xxx';
}

export class InputCmp {
  constructor(private model:Model){}
  ...
}

@Component({
    selector: 'textbox',
...
    providers: [Model]
})
export class Textbox implements OnInit {
  ...
}

柱塞示例