草庐IT

具有 4 级嵌套参数的 Angular 通用启动器预渲染

coder 2024-02-29 原文

出于某些原因，我想使用 https://github.com/angular/universal-starter 创建我的 Angular 5 项目的预渲染构建而不是服务器端渲染。

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

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

另外，还有一个 rest api 后端，我用它来为每个部分获取数据。例如，/category/1 是运动，/category/1/subcategory/1 是足球等等。

第一个问题:如何使用 prerender.js 为每个级别创建一个 html 文件以及我的 static.paths.ts 看起来像?

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

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

我正在使用 Angular 5.0.0 和 ngx-restangular 2.0.2

谢谢。

最佳答案

预渲染和运行时服务器端渲染的设置大部分相似，唯一的区别是一个是静态的，另一个是动态的。您仍将配置 Universal 要求您设置的一切以使其正常工作。

在我进入你的问题之前，我强烈建议你关注 this (逐步配置)和 this (关于 Angular Universal 陷阱的有用部分)指导配置 Angular Universal，因为它是我读过的更全面和最新的文章之一。

First question: How can I create a html file for each of these levels by using prerender.js and How should my static.paths.ts look like?

你的 static.path.ts 应该包含你想要预渲染的所有路由:

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

看起来很乏味吧？这是静态生成的 HTML 与灵活的运行时服务器端呈现相对的权衡。您可以而且可能应该编写自己的脚本来生成您的应用程序可用的所有路由(查询数据库、生成所有可能的值等)以预呈现您想要的所有页面。

Second question: How can I set meta tags for each of these pages?

与设置元标记或任何 Angular 应用程序的方式没有什么不同，您可以使用 Title和 Meta 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) });
    };
}

Third question: How should my app-routing.module look like? Should I use children approach

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

关于具有 4 级嵌套参数的 Angular 通用启动器预渲染，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50201410/

启动器Angularcode39sectionseoangular5angular-universal

有关具有 4 级嵌套参数的 Angular 通用启动器预渲染的更多相关文章

  1. ruby - 具有身份验证的私有(private) Ruby Gem 服务器 - 2

    我想安装一个带有一些身份验证的私有(private)Rubygem服务器。我希望能够使用公共(public)Ubuntu服务器托管内部gem。我读到了http://docs.rubygems.org/read/chapter/18.但是那个没有身份验证-如我所见。然后我读到了https://github.com/cwninja/geminabox.但是当我使用基本身份验证(他们在他们的Wiki中有)时，它会提示从我的服务器获取源。所以。如何制作带有身份验证的私有(private)Rubygem服务器？这是不可能的吗？谢谢。编辑:Geminabox问题。我尝试“捆绑”以安装新的gem..

  2. ruby-on-rails - Rails 编辑表单不显示嵌套项 - 2

    我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib

  3. ruby-on-rails - 渲染另一个 Controller 的 View - 2

    我想要做的是有2个不同的Controller，client和test_client。客户端Controller已经构建，我想创建一个test_clientController，我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集，然后呈现客户端Controller的索引View，以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>

  4. ruby - 将散列转换为嵌套散列 - 2

    这道题是thisquestion的逆题.给定一个散列，每个键都有一个数组，例如{[:a,:b,:c]=>1,[:a,:b,:d]=>2,[:a,:e]=>3,[:f]=>4,}将其转换为嵌套哈希的最佳方法是什么{:a=>{:b=>{:c=>1,:d=>2},:e=>3,},:f=>4,} 最佳答案 这是一个迭代的解决方案，递归的解决方案留给读者作为练习:defconvert(h={})ret={}h.eachdo|k,v|node=retk[0..-2].each{|x|node[x]||={};node=node[x]}node[

  5. ruby-on-rails - 如何在 ruby​​ 中使用两个参数异步运行 exe？ - 2

    exe应该在我打开页面时运行。异步进程需要运行。有什么方法可以在ruby​​中使用两个参数异步运行exe吗？我已经尝试过ruby​​命令-system()、exec()但它正在等待过程完成。我需要用参数启动exe，无需等待进程完成是否有任何ruby​​gems会支持我的问题？ 最佳答案 您可以使用Process.spawn和Process.wait2:pid=Process.spawn'your.exe','--option'#Later...pid,status=Process.wait2pid您的程序将作为解释器的子进程执行。除

  6. ruby - RSpec - 使用测试替身作为 block 参数 - 2

    我有一些Ruby代码，如下所示:Something.createdo|x|x.foo=barend我想编写一个测试，它使用double代替block参数x，这样我就可以调用:x_double.should_receive(:foo).with("whatever").这可能吗？ 最佳答案 specify'something'dox=doublex.should_receive(:foo=).with("whatever")Something.should_receive(:create).and_yield(x)#callthere

  7. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  8. ruby - 如何在 Ruby 中拆分参数字符串 Bash 样式？ - 2

    我正在为一个项目制作一个简单的shell，我希望像在Bash中一样解析参数字符串。foobar"helloworld"fooz应该变成:["foo","bar","helloworld","fooz"]等等。到目前为止，我一直在使用CSV::parse_line，将列分隔符设置为""和.compact输出。问题是我现在必须选择是要支持单引号还是双引号。CSV不支持超过一个分隔符。Python有一个名为shlex的模块:>>>shlex.split("Test'helloworld'foo")['Test','helloworld','foo']>>>shlex.split('Test"

  9. ruby - 检查方法参数的类型 - 2

    我不确定传递给方法的对象的类型是否正确。我可能会将一个字符串传递给一个只能处理整数的函数。某种运行时保证怎么样？我看不到比以下更好的选择:defsomeFixNumMangler(input)raise"wrongtype:integerrequired"unlessinput.class==FixNumother_stuffend有更好的选择吗？ 最佳答案 使用Kernel#Integer在使用之前转换输入的方法。当无法以任何合理的方式将输入转换为整数时，它将引发ArgumentError。defmy_method(number)

  10. ruby-on-rails - 启动 Rails 服务器时 ImageMagick 的警告 - 2

    最近，当我启动我的Rails服务器时，我收到了一长串警告。虽然它不影响我的应用程序，但我想知道如何解决这些警告。我的估计是imagemagick以某种方式被调用了两次？当我在警告前后检查我的git日志时。我想知道如何解决这个问题。-bcrypt-ruby(3.1.2)-better_errors(1.0.1)+bcrypt(3.1.7)+bcrypt-ruby(3.1.5)-bcrypt(>=3.1.3)+better_errors(1.1.0)bcrypt和imagemagick有关系吗？/Users/rbchris/.rbenv/versions/2.0.0-p247/lib/ru

随机推荐