ホームページ ウェブフロントエンド jsチュートリアル Angular 開発の実践サーバーサイド レンダリング

Angular 開発の実践サーバーサイド レンダリング

May 28, 2018 pm 02:07 PM
angular 仕える レンダリング

この記事では主に Angular 開発の実践におけるサーバーサイド レンダリングについて紹介し、参考として提供します。

Angular Universal

Angular は、サーバー側レンダリングのためのフロントエンドとバックエンドの同型ソリューションを提供します。これは、サーバー側で Angular アプリケーションを実行するテクノロジーです。

標準の Angular アプリケーションがブラウザーで実行され、ユーザーの操作に応じて DOM でページをレンダリングします。

Angular Universal は、サーバー側レンダリング (SSR) と呼ばれるプロセスを通じて、サーバー上に静的なアプリケーション ページを生成します。

これらのページを生成し、ブラウザーからの要求に応じて直接応答できます。 ページを HTML ファイルに事前生成し、それをサーバーの静的ファイルとして提供することもできます。

仕組み

ユニバーサル アプリケーションを作成するには、platform-server パッケージをインストールする必要があります。 platform-server パッケージは、サーバー側の DOM 実装、XMLHttpRequest、およびその他の低レベル機能を提供しますが、ブラウザーには依存しなくなりました。 platform-server 包。 platform-server 包提供了服务端的 DOM 实现、XMLHttpRequest 和其它底层特性,但不再依赖浏览器。

你要使用 platform-server 模块而不是 platform-browser 模块来编译这个客户端应用,并且在一个 Web 服务器上运行这个 Universal 应用。

服务器(下面的示例中使用的是 Node Express 服务器)会把客户端对应用页面的请求传给 renderModuleFactory 函数。

renderModuleFactory 函数接受一个模板 HTML 页面(通常是 index.html)、一个包含组件的 Angular 模块和一个用于决定该显示哪些组件的路由作为输入。

该路由从客户端的请求中传给服务器。 每次请求都会给出所请求路由的一个适当的视图。

renderModuleFactory 在模板中的 <app> 标记中渲染出哪个视图,并为客户端创建一个完成的 HTML 页面。

最后,服务器就会把渲染好的页面返回给客户端。

为什么要服务端渲染

三个主要原因:

  1. 帮助网络爬虫(SEO)

  2. 提升在手机和低功耗设备上的性能

  3. 迅速显示出第一个页面

帮助网络爬虫(SEO)

Google、Bing、百度、Facebook、Twitter 和其它搜索引擎或社交媒体网站都依赖网络爬虫去索引你的应用内容,并且让它的内容可以通过网络搜索到。

这些网络爬虫可能不会像人类那样导航到你的具有高度交互性的 Angular 应用,并为其建立索引。

Angular Universal 可以为你生成应用的静态版本,它易搜索、可链接,浏览时也不必借助 JavaScript。它也让站点可以被预览,因为每个 URL 返回的都是一个完全渲染好的页面。

启用网络爬虫通常被称为搜索引擎优化 (SEO)。

提升手机和低功耗设备上的性能

有些设备不支持 JavaScript 或 JavaScript 执行得很差,导致用户体验不可接受。 对于这些情况,你可能会需要该应用的服务端渲染、无 JavaScript 的版本。 虽然有一些限制,不过这个版本可能是那些完全没办法使用该应用的人的唯一选择。

快速显示首页

快速显示首页对于吸引用户是至关重要的。

如果页面加载超过了三秒中,那么 53% 的移动网站会被放弃。 你的应用需要启动的更快一点,以便在用户决定做别的事情之前吸引他们的注意力。

使用 Angular Universal,你可以为应用生成“着陆页”,它们看起来就和完整的应用一样。 这些着陆页是纯 HTML,并且即使 JavaScript 被禁用了也能显示。 这些页面不会处理浏览器事件,不过它们可以用 routerLink 在这个网站中导航。

在实践中,你可能要使用一个着陆页的静态版本来保持用户的注意力。 同时,你也会在幕后加载完整的 Angular 应用。 用户会认为着陆页几乎是立即出现的,而当完整的应用加载完之后,又可以获得完全的交互体验。

示例解析

下面将基于我在GitHub上的示例项目 angular-universal-starter 来进行讲解。

这个项目与第一篇的示例项目一样,都是基于 Angular CLI进行开发构建的,因此它们的区别只在于服务端渲染所需的那些配置上。

安装工具

在开始之前,下列包是必须安装的(示例项目均已配置好,只需 npm install 即可):

  1. @angular/platform-server - Universal 的服务端元件。

  2. @nguniversal/module-map-ngfactory-loader

    クライアント アプリケーションをコンパイルし、Web サーバー上でユニバーサル アプリケーションを実行するには、platform-b​​rowser モジュールの代わりに platform-server モジュールを使用する必要があります。 🎜🎜サーバー (以下の例では Node Express サーバーが使用されています) は、アプリケーション ページに対するクライアントのリクエストを renderModuleFactory 関数に渡します。 🎜🎜renderModuleFactory 関数は、テンプレート HTML ページ (通常はindex.html)、コンポーネントを含む Angular モジュール、およびどのコンポーネントを表示するかを決定するルートを入力として受け入れます。 🎜🎜このルートはクライアントのリクエストからサーバーに渡されます。 各リクエストは、リクエストされたルートの適切なビューを提供します。 🎜🎜renderModuleFactory は、テンプレートの <app> タグ内のビューをレンダリングし、クライアント用の完成した HTML ページを作成します。 🎜🎜最後に、サーバーはレンダリングされたページをクライアントに返します。 🎜🎜🎜サーバーサイドレンダリングを行う理由🎜🎜🎜主な理由は 3 つあります: 🎜
    1. 🎜 Web クローラーを支援 (SEO) 🎜
    2. 🎜 パフォーマンスの向上携帯電話や低電力デバイスで🎜
    3. 🎜最初のページを素早く表示🎜
    🎜🎜ウェブクローラー (SEO) を支援🎜🎜🎜Google、Bing、Baidu、Facebook、Twitter 、その他の検索エンジンやソーシャル メディア サイトはすべて Web クローラーに依存して、アプリのコンテンツにインデックスを付け、そのコンテンツを Web 全体で検索できるようにします。 🎜🎜これらの Web クローラーは、人間のように高度にインタラクティブな Angular アプリに移動してインデックスを作成できない場合があります。 🎜🎜Angular Universal は、JavaScript を必要とせずに検索、リンク、参照が可能なアプリケーションの静的バージョンを生成できます。また、各 URL が完全にレンダリングされたページを返すため、サイトをプレビューすることもできます。 🎜🎜 Web クローラーを有効にすることは、検索エンジン最適化 (SEO) と呼ばれることがよくあります。 🎜🎜🎜携帯電話および低電力デバイスのパフォーマンスの向上🎜🎜🎜一部のデバイスは JavaScript をサポートしていないか、JavaScript の実装が不十分であり、その結果、許容できないユーザー エクスペリエンスが生じています。 このような場合、サーバーでレンダリングされ、JavaScript を使用しないバージョンのアプリが必要になる場合があります。 いくつかの制限はありますが、アプリをまったく使用する方法がない場合は、このバージョンが唯一の選択肢になる可能性があります。 🎜🎜🎜ホームページを素早く表示する🎜🎜🎜 ユーザーを引き付けるには、ホームページを素早く表示することが重要です。 🎜🎜ページの読み込みに 3 秒以上かかると、モバイル Web サイトの 53% が放棄されます。 ユーザーが何か別のことをする前にユーザーの注意を引くために、アプリはより速く起動する必要があります。 🎜🎜Angular Universal を使用すると、アプリケーション全体と同じように見えるアプリケーションの「ランディング ページ」を生成できます。 これらのランディング ページは純粋な HTML であり、JavaScript が無効になっていても表示されます。 これらのページはブラウザ イベントを処理しませんが、routerLink を使用してサイト内を移動できます。 🎜🎜実際には、ユーザーの注意を引き続けるために、ランディング ページの静的バージョンを使用することもできます。 同時に、舞台裏で完全な Angular アプリケーションをロードすることになります。 ユーザーは、ランディング ページがほぼ即座に表示されることを期待し、完全なアプリがロードされると、完全にインタラクティブなエクスペリエンスが得られることになります。 🎜🎜🎜サンプル分析🎜🎜🎜以下は、GitHub にある私のサンプルプロジェクト angular-universal-starter に基づいて説明します。 🎜🎜このプロジェクトは、最初の記事のサンプル プロジェクトと同様、Angular CLI に基づいて開発およびビルドされているため、それらの唯一の違いはサーバー側のレンダリングに必要な構成です。 🎜🎜🎜インストール ツール🎜🎜🎜 開始する前に、次のパッケージをインストールする必要があります (サンプル プロジェクトは設定済みです。npm install だけです): 🎜
    1. 🎜@angular/platform-server - Universal のサーバー コンポーネント。 🎜
    2. 🎜@nguniversal/module-map-ngfactory-loader - サーバー側のレンダリング環境で遅延読み込みを処理するために使用されます。 🎜
    3. @nguniversal/express-engine - Universal 应用的 Express 引擎。

    4. ts-loader - 用于对服务端应用进行转译。

    5. express - Node Express 服务器

    使用下列命令安装它们:

    npm install --save @angular/platform-server @nguniversal/module-map-ngfactory-loader ts-loader @nguniversal/express-engine express
    ログイン後にコピー

    项目配置

    配置工作有:

    1. 创建服务端应用模块:src/app/app.server.module.ts

    2. 修改客户端应用模块:src/app/app.module.ts

    3. 创建服务端应用的引导程序文件:src/main.server.ts

    4. 修改客户端应用的引导程序文件:src/main.ts

    5. 创建 TypeScript 的服务端配置:src/tsconfig.server.json

    6. 修改 @angular/cli 的配置文件:.angular-cli.json

    7. 创建 Node Express 的服务程序:server.ts

    8. 创建服务端预渲染的程序:prerender.ts

    9. 创建 Webpack 的服务端配置:webpack.server.config.js

    1、创建服务端应用模块:src/app/app.server.module.ts

    import { NgModule } from &#39;@angular/core&#39;;
    import { ServerModule, ServerTransferStateModule } from &#39;@angular/platform-server&#39;;
    import { ModuleMapLoaderModule } from &#39;@nguniversal/module-map-ngfactory-loader&#39;;
    
    import { AppBrowserModule } from &#39;./app.module&#39;;
    import { AppComponent } from &#39;./app.component&#39;;
    
    // 可以注册那些在 Universal 环境下运行应用时特有的服务提供商
    @NgModule({
      imports: [
        AppBrowserModule, // 客户端应用的 AppModule
        ServerModule, // 服务端的 Angular 模块
        ModuleMapLoaderModule, // 用于实现服务端的路由的惰性加载
        ServerTransferStateModule, // 在服务端导入,用于实现将状态从服务器传输到客户端
      ],
      bootstrap: [AppComponent],
    })
    export class AppServerModule {
    }
    ログイン後にコピー

    服务端应用模块(习惯上叫作 AppServerModule)是一个 Angular 模块,它包装了应用的根模块 AppModule,以便 Universal 可以在你的应用和服务器之间进行协调。 AppServerModule 还会告诉 Angular 再把你的应用以 Universal 方式运行时,该如何引导它。

    2、修改客户端应用模块:src/app/app.module.ts

    @NgModule({
      imports: [
        AppRoutingModule,
        BrowserModule.withServerTransition({appId: &#39;my-app&#39;}),
        TransferHttpCacheModule, // 用于实现服务器到客户端的请求传输缓存,防止客户端重复请求服务端已完成的请求
        BrowserTransferStateModule, // 在客户端导入,用于实现将状态从服务器传输到客户端
        HttpClientModule
      ],
      declarations: [
        AppComponent,
        HomeComponent
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppBrowserModule {
      constructor(@Inject(PLATFORM_ID) private platformId: Object,
            @Inject(APP_ID) private appId: string) {
        
        // 判断运行环境为客户端还是服务端
        const platform = isPlatformBrowser(platformId) ? &#39;in the browser&#39; : &#39;on the server&#39;;
        console.log(`Running ${platform} with appId=${appId}`);
      }
    }
    ログイン後にコピー

    NgModule 的元数据中 BrowserModule 的导入改成 BrowserModule.withServerTransition({appId: 'my-app'}),Angular 会把 appId 值(它可以是任何字符串)添加到服务端渲染页面的样式名中,以便它们在客户端应用启动时可以被找到并移除。

    此时,我们可以通过依赖注入(@Inject(PLATFORM_ID)@Inject(APP_ID))取得关于当前平台和 appId 的运行时信息:

    constructor(@Inject(PLATFORM_ID) private platformId: Object,
          @Inject(APP_ID) private appId: string) {
      
      // 判断运行环境为客户端还是服务端
      const platform = isPlatformBrowser(platformId) ? &#39;in the browser&#39; : &#39;on the server&#39;;
      console.log(`Running ${platform} with appId=${appId}`);
    }
    ログイン後にコピー

    3、创建服务端应用的引导程序文件:src/main.server.ts

    该文件导出服务端模块:

    export { AppServerModule } from &#39;./app/app.server.module&#39;;
    ログイン後にコピー

    4、修改客户端应用的引导程序文件:src/main.ts

    监听 DOMContentLoaded 事件,在发生 DOMContentLoaded 事件时运行我们的代码,以使 TransferState 正常工作

    import { enableProdMode } from &#39;@angular/core&#39;;
    import { platformBrowserDynamic } from &#39;@angular/platform-browser-dynamic&#39;;
    
    import { AppBrowserModule } from &#39;./app/app.module&#39;;
    import { environment } from &#39;./environments/environment&#39;;
    
    if (environment.production) {
      enableProdMode();
    }
    
    // 在 DOMContentLoaded 时运行我们的代码,以使 TransferState 正常工作
    document.addEventListener(&#39;DOMContentLoaded&#39;, () => {
      platformBrowserDynamic().bootstrapModule(AppBrowserModule);
    });
    ログイン後にコピー

    5、创建 TypeScript 的服务端配置:src/tsconfig.server.json

    {
     "extends": "../tsconfig.json",
     "compilerOptions": {
      "outDir": "../out-tsc/app",
      "baseUrl": "./",
      "module": "commonjs",
      "types": [
       "node"
      ]
     },
     "exclude": [
      "test.ts",
      "**/*.spec.ts"
     ],
     "angularCompilerOptions": {
      "entryModule": "app/app.server.module#AppServerModule"
     }
    }
    ログイン後にコピー

    tsconfig.app.json 的差异在于:

    module 属性必须是 commonjs,这样它才能被 require() 方法导入你的服务端应用。

    angularCompilerOptions 部分有一些面向 AOT 编译器的选项:

    1. entryModule - 服务端应用的根模块,其格式为 path/to/file#ClassName。

    6、修改 @angular/cli 的配置文件:.angular-cli.json

    apps 下添加:

    {
      "platform": "server",
      "root": "src",
      "outDir": "dist/server",
      "assets": [
       "assets",
       "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.server.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.server.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "",
      "styles": [
       "styles.scss"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
       "dev": "environments/environment.ts",
       "prod": "environments/environment.prod.ts"
      }
    }
    ログイン後にコピー

    7、创建 Node Express 的服务程序:server.ts

    import &#39;zone.js/dist/zone-node&#39;;
    import &#39;reflect-metadata&#39;;
    import { enableProdMode } from &#39;@angular/core&#39;;
    
    import * as express from &#39;express&#39;;
    import { join } from &#39;path&#39;;
    import { readFileSync } from &#39;fs&#39;;
    
    // Faster server renders w/ Prod mode (dev mode never needed)
    enableProdMode();
    
    // Express server
    const app = express();
    
    const PORT = process.env.PORT || 4000;
    const DIST_FOLDER = join(process.cwd(), &#39;dist&#39;);
    
    // Our index.html we&#39;ll use as our template
    const template = readFileSync(join(DIST_FOLDER, &#39;browser&#39;, &#39;index.html&#39;)).toString();
    
    // * NOTE :: leave this as require() since this file is built Dynamically from webpack
    const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require(&#39;./dist/server/main.bundle&#39;);
    
    // Express Engine
    import { ngExpressEngine } from &#39;@nguniversal/express-engine&#39;;
    // Import module map for lazy loading
    import { provideModuleMap } from &#39;@nguniversal/module-map-ngfactory-loader&#39;;
    
    // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
    app.engine(&#39;html&#39;, ngExpressEngine({
      bootstrap: AppServerModuleNgFactory,
      providers: [
        provideModuleMap(LAZY_MODULE_MAP)
      ]
    }));
    
    app.set(&#39;view engine&#39;, &#39;html&#39;);
    app.set(&#39;views&#39;, join(DIST_FOLDER, &#39;browser&#39;));
    
    /* - Example Express Rest API endpoints -
     app.get(&#39;/api/**&#39;, (req, res) => { });
    */
    
    // Server static files from /browser
    app.get(&#39;*.*&#39;, express.static(join(DIST_FOLDER, &#39;browser&#39;), {
      maxAge: &#39;1y&#39;
    }));
    
    // ALl regular routes use the Universal engine
    app.get(&#39;*&#39;, (req, res) => {
      res.render(&#39;index&#39;, {req});
    });
    
    // Start up the Node server
    app.listen(PORT, () => {
      console.log(`Node Express server listening on http://localhost:${PORT}`);
    });
    ログイン後にコピー

    8、创建服务端预渲染的程序:prerender.ts

    // Load zone.js for the server.
    import &#39;zone.js/dist/zone-node&#39;;
    import &#39;reflect-metadata&#39;;
    import { readFileSync, writeFileSync, existsSync, mkdirSync } from &#39;fs&#39;;
    import { join } from &#39;path&#39;;
    
    import { enableProdMode } from &#39;@angular/core&#39;;
    // Faster server renders w/ Prod mode (dev mode never needed)
    enableProdMode();
    
    // Import module map for lazy loading
    import { provideModuleMap } from &#39;@nguniversal/module-map-ngfactory-loader&#39;;
    import { renderModuleFactory } from &#39;@angular/platform-server&#39;;
    import { ROUTES } from &#39;./static.paths&#39;;
    
    // * NOTE :: leave this as require() since this file is built Dynamically from webpack
    const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require(&#39;./dist/server/main.bundle&#39;);
    
    const BROWSER_FOLDER = join(process.cwd(), &#39;browser&#39;);
    
    // Load the index.html file containing referances to your application bundle.
    const index = readFileSync(join(&#39;browser&#39;, &#39;index.html&#39;), &#39;utf8&#39;);
    
    let previousRender = Promise.resolve();
    
    // Iterate each route path
    ROUTES.forEach(route => {
      const fullPath = join(BROWSER_FOLDER, route);
    
      // Make sure the directory structure is there
      if (!existsSync(fullPath)) {
        mkdirSync(fullPath);
      }
    
      // Writes rendered HTML to index.html, replacing the file if it already exists.
      previousRender = previousRender.then(_ => renderModuleFactory(AppServerModuleNgFactory, {
        document: index,
        url: route,
        extraProviders: [
          provideModuleMap(LAZY_MODULE_MAP)
        ]
      })).then(html => writeFileSync(join(fullPath, &#39;index.html&#39;), html));
    });
    ログイン後にコピー

    9、创建 Webpack 的服务端配置:webpack.server.config.js

    Universal 应用不需要任何额外的 Webpack 配置,Angular CLI 会帮我们处理它们。但是由于本例子的 Node Express 的服务程序是 TypeScript 应用(server.ts及prerender.ts),所以要使用 Webpack 来转译它。这里不讨论 Webpack 的配置,需要了解的移步 Webpack官网

    // Work around for https://github.com/angular/angular-cli/issues/7200
    
    const path = require(&#39;path&#39;);
    const webpack = require(&#39;webpack&#39;);
    
    module.exports = {
      entry: {
        server: &#39;./server.ts&#39;, // This is our Express server for Dynamic universal
        prerender: &#39;./prerender.ts&#39; // This is an example of Static prerendering (generative)
      },
      target: &#39;node&#39;,
      resolve: {extensions: [&#39;.ts&#39;, &#39;.js&#39;]},
      externals: [/(node_modules|main\..*\.js)/,], // Make sure we include all node_modules etc
      output: {
        path: path.join(__dirname, &#39;dist&#39;), // Puts the output at the root of the dist folder
        filename: &#39;[name].js&#39;
      },
      module: {
        rules: [
          {test: /\.ts$/, loader: &#39;ts-loader&#39;}
        ]
      },
      plugins: [
        new webpack.ContextReplacementPlugin(
          /(.+)?angular(\\|\/)core(.+)?/, // fixes WARNING Critical dependency: the request of a dependency is an expression
          path.join(__dirname, &#39;src&#39;), // location of your src
          {} // a map of your routes
        ),
        new webpack.ContextReplacementPlugin(
          /(.+)?express(\\|\/)(.+)?/, // fixes WARNING Critical dependency: the request of a dependency is an expression
          path.join(__dirname, &#39;src&#39;),
          {}
        )
      ]
    };
    ログイン後にコピー

    测试配置

    通过上面的配置,我们就制作完成一个可在服务端渲染的 Angular Universal 应用。

    在 package.json 的 scripts 区配置 build 和 serve 有关的命令:

    {
      "scripts": {
        "ng": "ng",
        "start": "ng serve -o",
        "ssr": "npm run build:ssr && npm run serve:ssr",
        "prerender": "npm run build:prerender && npm run serve:prerender",
        "build": "ng build",
        "build:client-and-server-bundles": "ng build --prod && ng build --prod --app 1 --output-hashing=false",
        "build:prerender": "npm run build:client-and-server-bundles && npm run webpack:server && npm run generate:prerender",
        "build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
        "generate:prerender": "cd dist && node prerender",
        "webpack:server": "webpack --config webpack.server.config.js --progress --colors",
        "serve:prerender": "cd dist/browser && http-server",
        "serve:ssr": "node dist/server"
      }
    }
    ログイン後にコピー

    开发只需运行 npm run start执行 npm run ssr 编译应用程序,并启动一个Node Express来为应用程序提供服务 http://localhost:4000

    dist目录:

    执行npm run prerender - 编译应用程序并预渲染应用程序文件,启动一个演示http服务器,以便您可以查看它 http://localhost:8080

    注意: 要将静态网站部署到静态托管平台,您必须部署dist/browser文件夹, 而不是dist文件夹

    dist目录:

    根据项目实际的路由信息并在根目录的 static.paths.ts 中配置,提供给 prerender.ts 解析使用。

    export const ROUTES = [
      &#39;/&#39;,
      &#39;/lazy&#39;
    ];
    ログイン後にコピー

    因此,从dist目录可以看到,服务端预渲染会根据配置好的路由在 browser 生成对应的静态index.html。如 / 对应 /index.html/lazy 对应 /lazy/index.html

    服务器到客户端的状态传输

    在前面的介绍中,我们在 app.server.module.ts 中导入了 ServerTransferStateModule,在 app.module.ts 中导入了 BrowserTransferStateModuleTransferHttpCacheModule

    这三个模块都与服务器到客户端的状态传输有关:

    1. ServerTransferStateModule:在服务端导入,用于实现将状态从服务器传输到客户端

    2. BrowserTransferStateModule:在客户端导入,用于实现将状态从服务器传输到客户端

    3. TransferHttpCacheModule:用于实现服务器到客户端的请求传输缓存,防止客户端重复请求服务端已完成的请求

    使用这几个模块,可以解决 http请求在服务端和客户端分别请求一次 的问题。

    比如在 home.component.ts 中有如下代码:

    import { Component, OnDestroy, OnInit } from &#39;@angular/core&#39;;
    import { HttpClient } from &#39;@angular/common/http&#39;;
    import { Observable } from &#39;rxjs/Observable&#39;;
    
    @Component({
      selector: &#39;app-home&#39;,
      templateUrl: &#39;./home.component.html&#39;,
      styleUrls: [&#39;./home.component.scss&#39;]
    })
    export class HomeComponent implements OnInit, OnDestroy {
      constructor(public http: HttpClient) {
      }
      
      ngOnInit() {
        this.poiSearch(this.keyword, &#39;北京市&#39;).subscribe((data: any) => {
          console.log(data);
        });
      }
      
      ngOnDestroy() {
      }
      
      poiSearch(text: string, city?: string): Observable<any> {
        return this.http.get(encodeURI(`http://restapi.amap.com/v3/place/text?keywords=${text}&city=${city}&offset=20&key=55f909211b9950837fba2c71d0488db9&extensions=all`));
      }
    }
    ログイン後にコピー

    代码运行之后,

    服务端请求并打印:

    客户端再一次请求并打印:

    方法1:使用 TransferHttpCacheModule

    使用 TransferHttpCacheModule 很简单,代码不需要改动。在 app.module.ts 中导入之后,Angular自动会将服务端请求缓存到客户端,换句话说就是服务端请求到数据会自动传输到客户端,客户端接收到数据之后就不会再发送请求了。

    方法2:使用 BrowserTransferStateModule

    该方法稍微复杂一些,需要改动一些代码。

    调整 home.component.ts 代码如下:

    import { Component, OnDestroy, OnInit } from &#39;@angular/core&#39;;
    import { makeStateKey, TransferState } from &#39;@angular/platform-browser&#39;;
    import { HttpClient } from &#39;@angular/common/http&#39;;
    import { Observable } from &#39;rxjs/Observable&#39;;
    
    const KFCLIST_KEY = makeStateKey(&#39;kfcList&#39;);
    
    @Component({
      selector: &#39;app-home&#39;,
      templateUrl: &#39;./home.component.html&#39;,
      styleUrls: [&#39;./home.component.scss&#39;]
    })
    export class HomeComponent implements OnInit, OnDestroy {
      constructor(public http: HttpClient,
            private state: TransferState) {
      }
      
      ngOnInit() {
      
        // 采用一个标记来区分服务端是否已经拿到了数据,如果没拿到数据就在客户端请求,如果已经拿到数据就不发请求
        const kfcList:any[] = this.state.get(KFCLIST_KEY, null as any);
    
        if (!this.kfcList) {
          this.poiSearch(this.keyword, &#39;北京市&#39;).subscribe((data: any) => {
            console.log(data);
            this.state.set(KFCLIST_KEY, data as any); // 存储数据
          });
        }
      }
      
      ngOnDestroy() {
        if (typeof window === &#39;object&#39;) {
          this.state.set(KFCLIST_KEY, null as any); // 删除数据
        }
      }
      
      poiSearch(text: string, city?: string): Observable<any> {
        return this.http.get(encodeURI(`http://restapi.amap.com/v3/place/text?keywords=${text}&city=${city}&offset=20&key=55f909211b9950837fba2c71d0488db9&extensions=all`));
      }
    }
    ログイン後にコピー
    1. 使用 const KFCLIST_KEY = makeStateKey('kfcList') 创建储存传输数据的 StateKey

    2. HomeComponent 的构造函数中注入 TransferState

    3. ngOnInit 中根据 this.state.get(KFCLIST_KEY, null as any) 判断数据是否存在(不管是服务端还是客户端),存在就不再请求,不存在则请求数据并通过 this.state.set(KFCLIST_KEY, data as any) 存储传输数据

    4. ngOnDestroy 中根据当前是否客户端来决定是否将存储的数据进行删除

    上面是我整理给大家的,希望今后会对大家有帮助。

    相关文章:

    Js面试算法详解

    JS简单获取并修改input文本框内容的方法示例

    详解vue表单

以上がAngular 開発の実践サーバーサイド レンダリングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Windows で「サービスが応答していません」エラーを修正する方法。 Windows で「サービスが応答していません」エラーを修正する方法。 Apr 27, 2023 am 08:16 AM

NETSTART コマンドは、サービスやその他のプログラムの開始と停止に使用できる Windows の組み込みコマンドです。このコマンドの実行中に、NetHelpmsg2186 エラーが発生する場合があります。このエラーが発生したほとんどのユーザーは、NETSTARTWUAUSERV コマンドを実行して Windows Update サービスを再起動しようとします。 Windows Update サービスが無効になっているか、実行されていない場合、最新の更新プログラムを入手できないため、システムが危険にさらされる可能性があります。このエラーが発生する理由とそれを回避する方法を詳しく見てみましょう。わかった?エラー 2186 とは何ですか? Windows Update サービスは、最新の重要な更新プログラムとセキュリティ機能をインストールします

Windows 10 セキュリティ センター サービスが無効になっている場合の解決策 Windows 10 セキュリティ センター サービスが無効になっている場合の解決策 Jul 16, 2023 pm 01:17 PM

セキュリティ センター サービスは、win10 システムに組み込まれたコンピュータ保護機能であり、コンピュータのセキュリティをリアルタイムで保護できますが、一部のユーザーは、コンピュータの起動時にセキュリティ センター サービスが無効になる状況に遭遇します。方法は非常に簡単で、サービス パネルを開いて SecurityCenter 項目を見つけ、右クリックしてそのプロパティ ウィンドウを開き、スタートアップの種類を自動に設定し、[開始] をクリックしてサービスを再度開始します。 Win10 セキュリティ センター サービスが無効になっている場合の対処方法: 1. 「Win+R」を押して「操作」ウィンドウを開きます。 2. 次に、「services.msc」コマンドを入力して Enter キーを押します。 3. 次に、右側のウィンドウで「SecurityCenter」項目を見つけ、ダブルクリックしてプロパティ ウィンドウを開きます。

Ubuntu 24.04 に Angular をインストールする方法 Ubuntu 24.04 に Angular をインストールする方法 Mar 23, 2024 pm 12:20 PM

Angular.js は、動的アプリケーションを作成するための無料でアクセスできる JavaScript プラットフォームです。 HTML の構文をテンプレート言語として拡張することで、アプリケーションのさまざまな側面を迅速かつ明確に表現できます。 Angular.js は、コードの作成、更新、テストに役立つさまざまなツールを提供します。さらに、ルーティングやフォーム管理などの多くの機能も提供します。このガイドでは、Ubuntu24 に Angular をインストールする方法について説明します。まず、Node.js をインストールする必要があります。 Node.js は、ChromeV8 エンジンに基づく JavaScript 実行環境で、サーバー側で JavaScript コードを実行できます。ウブにいるために

Kujiale で直交上面ビューをレンダリングする方法_Kijiale で直交上面ビューをレンダリングするチュートリアル Kujiale で直交上面ビューをレンダリングする方法_Kijiale で直交上面ビューをレンダリングするチュートリアル Apr 02, 2024 pm 01:10 PM

1. まず、Kijiale でレンダリングするデザインプランを開きます。 2. 次に、レンダリング メニューでトップ ビュー レンダリングを開きます。 3. 次に、トップ ビュー レンダリング インターフェイスのパラメーター設定で [直交] をクリックします。 4. 最後に、モデルの角度を調整した後、[今すぐレンダリング]をクリックして直交上面ビューをレンダリングします。

コマンドを使用してリモート デスクトップ接続サービスを開く方法 コマンドを使用してリモート デスクトップ接続サービスを開く方法 Dec 31, 2023 am 10:38 AM

リモート デスクトップ接続は多くのユーザーの日常生活に利便性をもたらしていますが、操作がより便利なコマンドを使用してリモート接続したいと考えている人もいます。リモート デスクトップ接続サービスは、コマンドを使用して開くことでこの問題を解決できます。リモート デスクトップ接続コマンドの設定方法: 方法 1. コマンドを実行してリモート接続します。 1. 「Win+R」を押して「ファイル名を指定して実行」を開き、「mstsc2」と入力し、「オプションの表示」をクリックします。 3. IP アドレスを入力して、「クリック」をクリックします。 "接続する"。 4. 接続中であることが表示されます。方法 2: コマンド プロンプトを介してリモート接続する 1. 「Win+R」を押して「ファイル名を指定して実行」を開き、「cmd2」と入力します。「コマンド プロンプト」に「mstsc/v:192.168.1.250/console」と入力します。

win7でオーディオサービスを有効にする方法 win7でオーディオサービスを有効にする方法 Jul 10, 2023 pm 05:13 PM

コンピュータには、さまざまなプログラムのアプリケーションをサポートする多くのシステム サービスがあります。ハードウェアの問題のトラブルシューティングを行った後、コンピューターから音が出ず、ほとんどのオーディオ サービスがオンになっていない場合、Win7 でオーディオ サービスを有効にするにはどうすればよいですか?多くの友人が混乱しているため、win7 でオーディオ サービスを有効にする方法については、以下のエディターが win7 でオーディオ サービスを有効にする方法を紹介します。 win7でオーディオサービスを有効にする方法。 1. Windows 7 システムのコンピュータのデスクトップでコンピュータを見つけ、右クリックして管理オプションを選択します。 2. 開いたコンピュータ管理インターフェイスの [サービスとアプリケーション] でサービス項目を見つけて開きます。右側のサービス インターフェイスで WindowsAudio を見つけ、ダブルクリックして変更を開きます。 4. 通常のプロジェクトに切り替え、「開始」をクリックして機能を有効にします。

Linux でサービスを再起動する正しい方法は何ですか? Linux でサービスを再起動する正しい方法は何ですか? Mar 15, 2024 am 09:09 AM

Linux でサービスを再起動する正しい方法は何ですか? Linux システムを使用していると、特定のサービスを再起動する必要がある状況がよく発生しますが、サービスの再起動時に実際にサービスが停止しない、または開始しないなどの問題が発生することがあります。したがって、サービスを再起動する正しい方法を習得することが非常に重要です。 Linux では、通常、systemctl コマンドを使用してシステム サービスを管理できます。 systemctl コマンドは systemd システム マネージャーの一部です

認証コードではロボットを止めることはできません! Google AI はぼやけたテキストを正確に識別できますが、GPT-4 は盲目のふりをして助けを求めます 認証コードではロボットを止めることはできません! Google AI はぼやけたテキストを正確に識別できますが、GPT-4 は盲目のふりをして助けを求めます Apr 12, 2023 am 09:46 AM

「最も迷惑なのは、Web サイトにログインするときにさまざまな種類の奇妙な (または変態的な) 確認コードが表示されることです。」 さて、良いニュースと悪いニュースがあります。良いニュースは、AI がこれを行ってくれるということです。私の言うことが信じられないかもしれませんが、認識の困難さが増大する 3 つの実際のケースを以下に示します。 そして、これらは「Pix2Struct」と呼ばれるモデルによって得られる答えです。 これらはすべて正確で、一字一句正確ですか?一部のネチズンは「確かに、精度は私よりも優れています。」と嘆いています。では、それをブラウザのプラグインにすることはできるのでしょうか? ?はい、一部の人は次のように言いました。これらのケースは比較的単純ですが、微調整するだけで、その効果がどれほど強力になるかは想像できません。悪い知らせは、検証コードでは間もなくロボットを停止できなくなるということです。 (危ない危ない…)どうやってやるの? Pix2St

See all articles