Angular 升级 - 不能将升级后的组件用作入口组件
Angular Upgrade - can't use upgraded component as entry component
我正在使用 Angular 升级模块,其组件是从 AngularJS 升级而来的。当我在模板中使用组件时,它们工作正常,但当我尝试将它们用作入口组件时,我收到错误消息:
MyNgComponent cannot be used as an entry component.
可能是因为升级的组件被定义为指令。我还尝试包装到另一个组件中,但在这种情况下,它在尝试创建组件实例时给我一个错误:
NullInjectorError: No provider for $scope!
$scope
由内部 UpgradeComponent 实现请求,如果在模板中使用组件,它可以很好地解决。
是混合模式的限制还是有什么办法可以作为入口组件使用?
需要入口组件,因为我需要从JS实例化这个组件并手动附加到非angular DOM元素
似乎是混合模式的限制。在我的例子中,有必要动态创建升级的组件并将它们附加到 DOM。在这种情况下,可以使用以下解决方法:
- 创建一个常规 Angular 组件作为升级的 AngularJS 指令的包装器,这样它的模板只包含升级的指令
- 将此包装器组件添加到
entryComponents
模块部分
- 使用根混合组件的注入器动态实例化此包装器组件
例如,我有一个虚拟 AngularJS 指令
angular.module('app').component('myComponent', {
template: 'dummy content',
controller: class {},
controllerAs: 'vm'
});
@Directive({
selector: 'my-component'
})
export class MyUpgradedDirective extends UpgradeComponent {
constructor(elementRef: ElementRef, injector: Injector) {
super('myComponent', elementRef, injector);
}
}
创建包装器组件:
@Component({
selector: 'app-nested',
template: '<my-component></my-component>'
})
export class WrapperComponent { }
将其添加到 entryComponents
@NgModule({
imports: [ BrowserModule, UpgradeModule ],
declarations: [ AppComponent, NestedComponent, MyUpgradedDirective ],
entryComponents: [ AppComponent, NestedComponent ] // here
})
使用来自根混合组件的注入器创建包装器实例:
function createMyComponent<T>(componentFactoryResolver: ComponentFactoryResolver, injector: Injector /* must be passed from root hybrid component */, component: Type<T>) {
return componentFactoryResolver
.resolveComponentFactory(component)
.create(injector);
}
我正在使用 Angular 升级模块,其组件是从 AngularJS 升级而来的。当我在模板中使用组件时,它们工作正常,但当我尝试将它们用作入口组件时,我收到错误消息:
MyNgComponent cannot be used as an entry component.
可能是因为升级的组件被定义为指令。我还尝试包装到另一个组件中,但在这种情况下,它在尝试创建组件实例时给我一个错误:
NullInjectorError: No provider for $scope!
$scope
由内部 UpgradeComponent 实现请求,如果在模板中使用组件,它可以很好地解决。
是混合模式的限制还是有什么办法可以作为入口组件使用?
需要入口组件,因为我需要从JS实例化这个组件并手动附加到非angular DOM元素
似乎是混合模式的限制。在我的例子中,有必要动态创建升级的组件并将它们附加到 DOM。在这种情况下,可以使用以下解决方法:
- 创建一个常规 Angular 组件作为升级的 AngularJS 指令的包装器,这样它的模板只包含升级的指令
- 将此包装器组件添加到
entryComponents
模块部分 - 使用根混合组件的注入器动态实例化此包装器组件
例如,我有一个虚拟 AngularJS 指令
angular.module('app').component('myComponent', {
template: 'dummy content',
controller: class {},
controllerAs: 'vm'
});
@Directive({
selector: 'my-component'
})
export class MyUpgradedDirective extends UpgradeComponent {
constructor(elementRef: ElementRef, injector: Injector) {
super('myComponent', elementRef, injector);
}
}
创建包装器组件:
@Component({
selector: 'app-nested',
template: '<my-component></my-component>'
})
export class WrapperComponent { }
将其添加到 entryComponents
@NgModule({
imports: [ BrowserModule, UpgradeModule ],
declarations: [ AppComponent, NestedComponent, MyUpgradedDirective ],
entryComponents: [ AppComponent, NestedComponent ] // here
})
使用来自根混合组件的注入器创建包装器实例:
function createMyComponent<T>(componentFactoryResolver: ComponentFactoryResolver, injector: Injector /* must be passed from root hybrid component */, component: Type<T>) {
return componentFactoryResolver
.resolveComponentFactory(component)
.create(injector);
}