createServerRenderからサーバーサイドにデータを挿入する方法は？

Question

私はいくつかのチュートリアルを読んできましたが、実際にデータをコンポーネントに渡す方法を示すのに十分な深さ（または十分な深さ）はありません。

boot.server.tsで：これは私が得ることができる最も遠い

export default createServerRenderer(params => { 
    const providers = [ 
     // default providers here 
     { provide: 'MYDATA', useValue: params.data.myData } 
    ]; 
    return platformDynamicServer(providers).bootstrapModule(AppModule).then(moduleRef => { 
     // default implementation 
    }); 

コンポーネントで：

import { Component, Inject } from '@angular/core'; 
@Component({ 
    selector: 'nav-menu', 
    templateUrl: './navmenu.component.html', 
    styleUrls: ['./navmenu.component.css'] 
}) 
export class NavMenuComponent 
{ 
    constructor(@Inject("MYDATA") myData: string) { } 
} 

しかし、これは私がにデータを取得することができたNo provider for 'MYDATA'!

で失敗しますwindowしかし、これは明らかにserver-sideで動作しません。
MYDATAをプロバイダとしてapp.module.server.tsに追加する必要があるかどうかわかりません。

Answer 1

これを将来（〜2018）読むなら、TransferStateを代わりに使用してください。

---

クライアント側でこのエラーが発生しているようです。おそらくクライアント側のMYDATAのプロバイダを指定するのを忘れていました。私は通常、app.module.browser.tsを（以前の名前app.module.client.ts）。このような例 でこれを行う：あなたが使用することができます

@NgModule({ 
    bootstrap: [AppComponent], 
    imports: [ 
     BrowserModule, 
     BrowserAnimationsModule, 
     AppSharedModule 
    ], 
    providers: [ 
     { provide: 'MYDATA', useFactory: getMyData } 
    ] 
}) 
export class AppModule 
{ 
} 

/** 
* reads state from the dom generated on the server side 
*/ 
export function getMyData() 
{ 
    const appState = document.querySelector("app-state"); 
    if (appState) 
    { 
     return JSON.parse(appState.textContent!); 
    } 
    return null; 
} 

は、サーバー側の状態を保存するには以下の技術：

import { Component, PLATFORM_ID, Inject } from '@angular/core'; 
import { isPlatformServer } from '@angular/common'; 

@Component({ 
    selector: 'app-state', 
    template: '{{state|json}}' 
}) 
/** state component*/ 
export class StateComponent 
{ 
    state: any; 

    /** state ctor */ 
    constructor(@Inject(PLATFORM_ID) platformId: any) 
    { 
     if (isPlatformServer(platformId)) 
     { 
      this.state = { 
       prop: "some state determined on the server side" 
      } 
     } 
    } 
} 

そして、あなたのapp.component.htmlであなたは、このような状態のコンポーネントを置くか、クライアント側でそれをスキップする条件を追加することができます。

<app-state></app-state>