Angular 具有4层嵌套参数的角度通用启动程序预渲染

出于某些原因，我希望使用预渲染来创建angular 5项目的预渲染构建，而不是服务器端渲染

我的路线中有4个级别，如下所示：

example.com/category/:id/subcategory/:id/event/:id/ticket/:id

另外，还有一个RESTAPI后端，我正在使用它获取每个部分的数据。例如，/category/1是体育，/category/1/subcategory/1是足球等等

第一个问题：如何使用

prerender.js

为这些级别创建html文件，以及我的

static.path.ts

应该是什么样子

第二个问题：如何为每个页面设置元标记

第三个问题：我的

应用程序路由.module

应该是什么样子？我应该使用

children

方法吗

我使用Angular 5.0.0和ngx restangular 2.0.2

---

谢谢。

预渲染和运行时服务器端渲染的设置基本相似，唯一的区别是一个是静态的，另一个是动态的。您仍将配置Universal为使其工作所需的所有设置

在我开始回答您的问题之前，我强烈建议您遵循（逐步配置）和（关于角度通用陷阱的有用部分）指南来配置角度通用，因为这是我读过的一篇更全面、最新的文章

---

第一个问题：如何使用prerender.js为这些级别创建一个html文件，以及我的static.path.ts应该是什么样子

您的static.path.ts应包含要预渲染的所有路由：

export const ROUTES = [
  '/',
  '/category/1/subcategory/1/event/1/ticket/1',
  '/category/1/subcategory/1/event/1/ticket/2',
  ...
];

看起来很乏味吧？与灵活的运行时服务器端呈现相比，这是静态生成HTML的折衷方案。您可以也可能应该编写自己的脚本来生成应用程序可用的所有路由（查询数据库、生成所有可能的值等），以预呈现您想要的所有页面

第二个问题：如何为每个页面设置元标记

与设置元标记或任何Angular应用程序的方式相同，您可以使用Angular提供的和服务

例如：

constructor(
    @Inject(PLATFORM_ID) private platformId: Object,
    private meta: Meta,
    private title: Title,
    private pageMetaService: PageMetaService
) { }

ngOnInit() {
    if (isPlatformBrowser(this.platformId)) {
        this.title.setTitle((`${this.article.title} - Tilt Report`));

        let metadata = [
            { name: 'title', content: 'Title' },
            { name: 'description', content: 'This is my description' },
            { property: 'og:title', content: 'og:Title' },
            { property: 'og:description', content: 'og:Description' },
            { property: 'og:url', content: 'http://www.example.com' },
        ];
        metadata.forEach((tag) => { this.meta.updateTag(tag) });
    };
}

第三个问题：我的app-routing.module应该是什么样子？我应该使用儿童方法吗

---

您可以选择使用或不使用“children”方法，我假设这是延迟加载模块。在配置Angular Universal时，应进行某些设置，以使延迟加载的模块能够在服务器端工作。

预渲染和运行时服务器端渲染的设置基本相似，唯一的区别是一个是静态的，另一个是动态的。您仍将配置Universal为使其工作所需的所有设置

在我开始回答您的问题之前，我强烈建议您遵循（逐步配置）和（关于角度通用陷阱的有用部分）指南来配置角度通用，因为这是我读过的一篇更全面、最新的文章

---

第一个问题：如何使用prerender.js为这些级别创建一个html文件，以及我的static.path.ts应该是什么样子

您的static.path.ts应包含要预渲染的所有路由：

export const ROUTES = [
  '/',
  '/category/1/subcategory/1/event/1/ticket/1',
  '/category/1/subcategory/1/event/1/ticket/2',
  ...
];

看起来很乏味吧？与灵活的运行时服务器端呈现相比，这是静态生成HTML的折衷方案。您可以也可能应该编写自己的脚本来生成应用程序可用的所有路由（查询数据库、生成所有可能的值等），以预呈现您想要的所有页面

第二个问题：如何为每个页面设置元标记

与设置元标记或任何Angular应用程序的方式相同，您可以使用Angular提供的和服务

例如：

constructor(
    @Inject(PLATFORM_ID) private platformId: Object,
    private meta: Meta,
    private title: Title,
    private pageMetaService: PageMetaService
) { }

ngOnInit() {
    if (isPlatformBrowser(this.platformId)) {
        this.title.setTitle((`${this.article.title} - Tilt Report`));

        let metadata = [
            { name: 'title', content: 'Title' },
            { name: 'description', content: 'This is my description' },
            { property: 'og:title', content: 'og:Title' },
            { property: 'og:description', content: 'og:Description' },
            { property: 'og:url', content: 'http://www.example.com' },
        ];
        metadata.forEach((tag) => { this.meta.updateTag(tag) });
    };
}

第三个问题：我的app-routing.module应该是什么样子？我应该使用儿童方法吗

您可以选择使用或不使用“children”方法，我假设这是延迟加载模块。在配置Angular Universal时，应该进行某些设置，以使延迟加载的模块能够在服务器端工作