Czy mogę uruchomić metodę komponentu tylko w kliencie za pomocą Angular2 Universal?

Question

Piszę aplikację angular2 universal. Ma on tabelę d3, ale miałem nadzieję, że renderuję tylko wykres d3 po stronie klienta (przeglądarki), a nie próbuję renderować go na serwerze. Czy istnieje interfejs uniwersalny angular2, który będzie uruchamiał tylko metodę komponentu tylko po stronie klienta?

tj

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' 
    }); 
    } 
} 

Czy istnieje coś takiego jak w przykładzie powyżej, które mogłyby pozwolić mi tylko uruchomić metodę ngUniversalBrowser tylko w przeglądarce OnInit?

Answer 1

Myślę, że mam odpowiedź. Ale to kompletny hack i jestem pewien, że nie zamierzali tego zrobić.

Sam wpadłem w ślepy zaułek (co zmusiło mnie do wyłączenia uniwersalności kątowej/wstępnego renderowania). Moja strata może być twoją korzyścią.

Istnieją określone obiekty, które nie są dostępne podczas renderowania wstępnego. Głównie "okno", czyli "document.window".

Dlaczego nie spróbować dodać instrukcji warunkowej w komponencie, który sprawdza, czy obiekt istnieje. Jeśli nie, załaduj swoje żółte tło. W przeciwnym razie ładuj jak zwykle.

Nie jestem pewien, czy oznacza to, że Twój komponent nie odświeży się, gdy "prawdziwy" klient zakończy ładowanie. Ale jestem pewien, że możesz ustawić coś do oglądania "okna" i sprawić, żeby tak się stało.

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

Answer 2

import { isBrowser } from 'angular2-universal'; 

isBrowser jest logiczna, że ​​można importować w składniku a następnie wykonanie kodu coditionaly tylko jeśli jest uruchomiona na kliencie.

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