Angular2 Universal을 사용하는 클라이언트에서만 구성 요소 메소드를 실행할 수 있습니까?

Question

angular2 universal 앱을 쓰고 있습니다. 그것은 d3 차트를 가지고 있지만 클라이언트 측 (브라우저)에서 d3 차트 만 렌더링하고 서버에서 렌더링하지는 않기를 바랬습니다. 컴포넌트가 클라이언트 쪽에서 만 실행되는 angular2 universal 인터페이스가 있습니까? 즉

class ComponentWithChart implements OnInit, ngUniversalBrowser { 

    elem; 

    constructor(private viewContainerRef:ViewContainerRef) {} 

    ngUniversalBrowserOnInit() { 

    this.elem = this.viewContainerRef.element.nativeElement; 

    d3.select(this.elem).append('div').style({ 
     'background-color':'yellow' 
    }); 
    } 
} 

이 날은 브라우저 만 OnInit에 ngUniversalBrowser 방법을 실행하도록 허용 할 수 있습니다 그 위의 예와 같이 있나요?

Answer 1

나는 대답을 얻었습니다. 그러나 그것은 완전한 해킹이며, 나는 그들이 당신을 위해 이것을하려는 의도가 아니라고 확신합니다.

나는 막 다른 골목에 빠져 나갔다. (각도 유니버셜/프리 렌 더링을 꺼야했다.) 내 손실이 귀하의 이익이 될 수도 있습니다.

미리 렌더링 할 때 사용할 수없는 특정 개체가 있습니다. 주로 "window", 즉 "document.window"입니다.

개체가 있는지 여부를 확인하는 구성 요소에 조건문을 추가하지 않는 이유는 무엇입니까? 그렇지 않으면 노란색 배경을로드하십시오. 그렇지 않으면 정상적으로로드하십시오.

"true"클라이언트로드가 완료되면 구성 요소가 새로 고침되지 않음을 의미하는지 확실하지 않습니다. 그러나 나는 당신이 "창"을보고 뭔가를 일으킬 수 있다고 확신합니다.

Answer 2

import { isBrowser } from 'angular2-universal'; 

isBrowser

ngInit() { 
 
    if (!window) { 
 
     // yellow background placeholder 
 
    } else 
 
     // real plumbing 
 
    } 
 
}

는 구성 요소에 가져온 다음은 클라이언트에서 실행중인 경우에만 coditionaly 코드를 실행할 수있는 부울입니다.

if (isBrowser) { 
    // this will not run on server 
}