如何在角度 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 语法，而组件又会动态加载它自己的子组件。这是我目前的plunkr，它使用的是Angular 2 beta 15。

Answer 1

使用共享服务与 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 {
  ...
}

Plunker example

Answer 2

原因是你忘了括号[]：

[model]="model.firstName"

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

见doc、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);