英文:
Generic component where projected content is instantiated in outer zone
问题
I understand your request. Here is the translated content:
我有一个 Web 组件，出于性能原因需要在 Angular 外部运行。
我想到了基本的方法：
@Component({
selector: 'run-outer-zone',
template: ''
})
class OuterZoneComponent {
constructor(private vcr: ViewContainerRef, private ngZone: NgZone) {
this.ngZone.runOutsideAngular(() => {
const compRef = vcr.createComponent(MyComponentWhichNeedsToRunOutsideAngular);
compRef.data = // 设置输入
})
}
}
它可以正常工作，但不够通用，如果有多个 Web 组件要处理，会显得很繁琐。
是否可能构建一个自定义的通用组件，在其中投影的内容在外部区域运行？
英文:
I have a webcomponent that for perf reasons needs to run outside angular.
I came up with the basic idea :
@Component({
selector: 'run-outer-zone',
template: ''
})
class OuterZoneComponent {
constructor(private vcr: ViewContainerRef, private ngZone: NgZone) {
this.ngZone.runOutsideAngular(() => {
const compRef = vcr.createComponent(MyComponentWhichNeedsToRunOutsideAngular);
compRef.data = // set the inputs
})
}
}
It works fine but that's not very generic and it's cumbersome if have multiple web components to handle.
Is it possible to build a custom generic component where the projected content is run in the outer zone ?
答案1
得分: 0
我最终编写了自己的指令来在NgZone之外运行特定组件。
受到NgIf工作原理的极大启发。
@Directive({
selector: '[runOutside]',
standalone: true,
})
export class RunOutsideDirective<T> {
private isOutside: boolean;
constructor(
private _viewContainer: ViewContainerRef,
private ngZone: NgZone,
private templateRef: TemplateRef<T>
) {}
ngOnInit() {
this.updateView(true);
}
@Input()
set runOutside(doRunOutside) {
this.updateView(doRunOutside);
}
private updateView(doRunOutside: boolean) {
if (doRunOutside === this.isOutside) {
return;
}
this._viewContainer.clear();
if (doRunOutside) {
this.ngZone.runOutsideAngular(() => {
this._viewContainer.createEmbeddedView(this.templateRef);
});
} else {
this._viewContainer.createEmbeddedView(this.templateRef);
}
}
}
用法：
<my-cmp *runOutside></my-cmp>
英文:
I ended up writing my own directive to run specific components outside the NgZone.
It's hugely inspired by how the NgIf works.
@Directive({
selector: '[runOutside]',
standalone: true,
})
export class RunOutsideDirective<T> {
private isOutside: boolean;
constructor(
private _viewContainer: ViewContainerRef,
private ngZone: NgZone,
private templateRef: TemplateRef<T>
) {}
ngOnInit() {
this.updateView(true);
}
@Input()
set runOutside(doRunOutside) {
this.updateView(doRunOutside);
}
private updateView(doRunOutside: boolean) {
if (doRunOutside === this.isOutside) {
return;
}
this._viewContainer.clear();
if (doRunOutside) {
this.ngZone.runOutsideAngular(() => {
this._viewContainer.createEmbeddedView(this.templateRef);
});
} else {
this._viewContainer.createEmbeddedView(this.templateRef);
}
}
}
usage :
<my-cmp *runOutside></my-cmp>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论