关于angular:Angular-应用里-serverts-文件的-APPBASEHREF-token-的用法

3次阅读

共计 1754 个字符,预计需要花费 5 分钟才能阅读完成。

Angular 利用里 server.ts 文件,上面这段代码的含意?

server.get('*', (req, res) => {
    res.render(indexHtml, {
      req,
      providers: [{provide: APP_BASE_HREF, useValue: req.baseUrl}],
    });
  });

在 Angular 利用中,server.ts 文件是用于构建服务器端渲染(Server-side rendering,简称 SSR)的入口文件。该文件中的代码通常应用 Node.js 的 http 模块创立一个 HTTP 服务器,用于解决客户端申请。

在这段代码中,server.get(‘*’, …) 示意当 HTTP 服务器收到任何申请时都会执行上面的回调函数。其中,res.render() 办法用于渲染 HTML 页面,并将其作为响应发送给客户端。这里的 indexHtml 是一个字符串,它是应用程序的 HTML 入口文件,在服务端渲染时须要将其填充为残缺的 HTML 页面。能够通过 Node.js 的文件系统模块或者其余形式加载 HTML 入口文件。

res.render() 办法的第二个参数是一个对象,用于向 HTML 页面注入数据。在这个例子中,咱们向 indexHtml 中注入了两个属性:

  • req:示意以后申请的上下文信息,包含申请的 URL、HTTP 头、HTTP 办法等。
  • providers:是一个数组,用于向 Angular 应用程序的 DI(Dependency Injection,依赖注入)零碎中注入数据。在这个例子中,咱们向 DI 零碎中注入了一个 APP_BASE_HREF 的提供者,用于指定应用程序的根门路。req.baseUrl 示意以后申请的门路,它会作为 APP_BASE_HREF 的值被注入到 DI 零碎中,从而在应用程序中能够应用 APP_BASE_HREF 依赖注入来获取以后申请的根门路。
    须要留神的是,这段代码只是 server.ts 文件中的一部分,还须要在其余中央(例如在 main.ts 中)定义 APP_BASE_HREF 的提供者。这样能力在客户端和服务端都正确地应用 APP_BASE_HREF 依赖注入。

APP_BASE_HREF 是一个 Angular 利用中用于指定应用程序根门路的常量。它通常用于在应用程序中构建 URL,例如生成导航链接或者加载资源文件。

在浏览器端,APP_BASE_HREF 的默认值为 /,即应用程序根门路为域名或者子门路。例如,如果应用程序的 URL 是 http://example.com/my-app/,那么应用程序的根门路就是 /my-app/。在这种状况下,APP_BASE_HREF 的默认值就是 /my-app/。

在服务器端渲染(Server-side rendering,简称 SSR)时,APP_BASE_HREF 的值可能须要依据以后申请的门路动静设置。例如,如果以后申请的门路为 /my-app/foo/bar,那么应用程序的根门路应该是 /my-app/,而不是 /。在这种状况下,须要将 APP_BASE_HREF 的值设置为以后申请的门路,能够通过 Node.js 的 req.baseUrl 属性获取以后申请的门路,例如:

const {APP_BASE_HREF} = require('@angular/common');
// ...
app.get('*', (req, res) => {
  const providers = [{ provide: APP_BASE_HREF, useValue: req.baseUrl}
  ];
  // ...
});

在应用程序中,能够应用 APP_BASE_HREF 常量来构建 URL,例如:

import {APP_BASE_HREF} from '@angular/common';

// ...

@Component({/* ... */})
export class MyComponent {constructor(@Inject(APP_BASE_HREF) private readonly baseHref: string) {}

  getMyUrl() {
    // 构建基于根门路的 URL
    return `${this.baseHref}/my-url`;
  }
}

在这个例子中,MyComponent 的构造函数中通过依赖注入获取了 APP_BASE_HREF 的值,而后应用它来构建 URL。

正文完
 0