angular - elementRef.nativeElement.remove() 对浏览器有什么负面影响吗？

Question

我正在设置超时以销毁 Angular 2 上的组件，该组件可能会在调用超时之前被销毁。无论哪种方式调用超时，它都会对组件的 native 元素执行 .remove()(即使它不再位于 dom 中)。

如果元素被销毁并且超时执行以删除已经被销毁的组件是否有任何不可见的负面影响？

export class AnimationCloserComponent {
    public queryParams$;

    constructor(
        private router: Router,
        private elementRef:ElementRef,
        private activatedRoute:ActivatedRoute) {}    

    ngOnInit() {
        /* Will look for routing instructions with QueryParams to route and close this component. These instructions may sometimes not be available.. */
        this.queryParams$ = this.activatedRoute
            .queryParamMap 
            .map(params => {
                    let closeOutletName = params.get('closeOutlet') || null;
                    if (closeOutletName != null) {
                        this.router.navigate(['', { outlets: { [closeOutletName]: null }}]);
                    }
                    return params.get('closeOutlet') || null;
                }
            );

        /* This is meant to destroy the component if the router could not route away from it. */
        setTimeout(()=>{
            this.elementRef.nativeElement.remove();
        }, 1500);
    }    
}

在我练习之前，我真的很想问问这样做是否可以。 (已经在下面阐明)

Answer 1

在 Angular 不知情的情况下移除原生 DOM 元素几乎是不可能的。 Angular 在名为 View 的抽象中保留所有与组件相关的节点(包括子组件) . View 中的节点指向 DOM 元素。考虑以下设置:

ComponentA
   ComponentB

View 层次结构将是这样的:

ComponentAView
    ElementNode('<b-comp>', document.createElement('<b-comp>'))
        ComponentBView
           ...
    ComponentClassNode(new ComponentB());

如果删除第一个元素<b-comp>来自 DOM Angular 对此一无所知。它将继续认为有可用的子组件。

这可能会导致意想不到的后果，例如 Angular 在 @ViewChildren 中报告子组件当您将其从 DOM 中删除时。