我们正在让 Angular 启动并在我们的 AngularJS 应用程序中运行,但我遇到了混合升级和降级组件的问题。
这是我当前问题的结构
最外层是我们的主要应用程序。
下一层是我的新 Angular 组件,它已降级,因此我可以在我的应用程序的 AngularJS 部分中使用它。(它以 ui-router 状态加载)。
最后一层是一个 AngularJS 组件,它已经升级为在 Angular 组件中使用。
最后一层是触发问题的原因。升级时(按照angular.io上的文档),它开始抛出此错误:
No provider for ElementRef!
这里有一些片段可能会提供帮助所需的信息
AngularJS 组件:
export const ProductComponent: ng.IComponentOptions = {
template: require('./product.html'),
controller: ProductController,
bindings: {
channel: '<',
datastandardId: '<',
productFamily: '<'
}
};
...
someModule.component('lpProduct', ProductComponent);
升级到 Angular:
@Directive({
selector: 'lp-product-ng2'
})
export class ProductDirective extends UpgradeComponent implements OnInit {
@Input() productFamily;
@Input() channel;
@Input() datastandardId;
constructor(@Inject('ElementRef') elementRef: ElementRef, @Inject('Injector') injector: Injector) {
super('lpProduct', elementRef, injector);
}
ngOnInit() {
super.ngOnInit();
}
}
@NgModule({
imports: [
...
],
exports: [...],
declarations: [
...,
ProductDirective
],
entryComponents: [...],
providers: [
...
]
})
export class CategoryListViewModule {
}
Angular 组件模板中使用的 AngularJS 组件
<lp-product-ng2
*ngIf="selectedProduct"
[productFamily]="selectedProduct"
[channel]="channel"
[datastandardId]="datastandardId">
</lp-product-ng2>
*ngIf
解析另一个元素,因此(click)
在元素位于 DOM 中之前不会引发异常。如果我删除*ngIf
,则立即引发异常,但源自代码的另一部分。
我担心问题在于组件的嵌套,但我没有证据。