正在将 AngularJS 组件升级到 Angular：没有 ElementRef 异常的提供程序

Question

我们正在 AngularJS 应用程序中 Angular 和运行，但我遇到了混合升级和降级组件的问题。

这是我当前问题的结构

最外层是我们的主要应用。

下一层是我的新 Angular 组件，它已降级，以便我可以在我的应用程序的 AngularJS 部分使用它。（它以 ui-路由器状态加载）。

最后一层是一个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 {
}

AngularAngular组件模板中使用的JS组件

<lp-product-ng2
    *ngIf="selectedProduct"
    [productFamily]="selectedProduct"
    [channel]="channel"
    [datastandardId]="datastandardId">
</lp-product-ng2>

*ngIf 在另一个元素的 (click) 上解析，因此直到元素在 DOM 中才会抛出异常。如果我删除 *ngIf，异常会立即抛出，但源自代码的另一部分。

我担心问题在于组件的嵌套，但我没有证据。

Answer 1

应该是：

@Inject(ElementRef)

和

@Inject(Injector)

正在将 AngularJS 组件升级到 Angular：没有 ElementRef 异常的提供程序

Upgrading AngularJS component to Angular: No provider for ElementRef exception

angularjs

angular-upgrade

angular