php 将带有路线的Angular应用程序集成到多个帖子中使用的WordPress模板中

7kqas0il 于 2022-11-21 发布在 PHP

关注(0)|答案(1)|浏览(133)

我们在WordPress上提供了一个多租户解决方案，我们给予每个合作伙伴一个子URL。每个子URL都可以访问一个Angular应用程序：

example.com/our-first-partner/angular/
example.com/our-second-partner/angular/

此外，Angular支持路由，因此每个应用示例都有自己的页面集：

example.com/our-first-partner/angular/dashboard
example.com/our-first-partner/angular/client/3
example.com/our-first-partner/angular/clients?type=A

每个“合作伙伴”角形url（example.com//angular<partner_slug>）指向一个WordPress页面帖子类型。假设我们至少有200个“角形”页面，每个合作伙伴一个。
我所要做的就是让WordPress和Angular都能够接收到未被篡改的URL并指向正确的页面。

example.com/our-second-partner/angular/client/3?showDetails=true

在WordPress方面，我希望重定向规则接受任何匹配“/angular/（.*）”的URL，并在内部加载具有匹配URL的永久链接（减去捕获的后缀）的页面帖子。“angular”页面将使用一个自定义PHP模板，该模板将设置为它的永久链接，即“/angular/"。
在Angular方面，我希望angular应用程序能够访问浏览器中输入的完整URL。Angular应用程序会将此URL视为/client/3的路由，并使用queryParams { showDetails：true }。目前，Angular应用程序在localhost：4200上独立运行时的路由工作正常。
我遇到的问题是我不知道如何在保留URL的同时将通配符URL重定向到特定的WordPress帖子。我找到的解决方案建议使用. htaccess。当我尝试使用时：
.htaccess

RewriteEngine On
RewriteRule (.*/angular/).+$ $1 [R=301,L]

在WordPress中分配给页面的PHP模板

Permalink is <?php echo get_permalink(); ?>
URL being accessed is <?php echo "$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]" ?>

请求https://example.com/our-second-partner/angular/client/3?showDetails=true时的结果

Permalink is https://example.com/our-second-partner/angular/
URL being accessed is https://example.com/our-second-partner/angular/

所以，重定向到正确的WordPress帖子页面，但我失去了URL的Angular 路由部分。
我觉得WP_Rewrite可能会像.htaccess规则那样重定向，并且不改变URL后缀，但是我在WP文档中没有找到很多关于如何正确使用WP重写的例子。有什么建议吗？

php

来源：https://stackoverflow.com/questions/74483600/integrate-an-angular-app-with-routes-into-a-wordpress-template-used-on-multiple

1条答案

按热度按时间

2sbarzqh1#

作为WordPress URL重写的新手，我在尝试创建自定义重写规则时遇到了一些“陷阱”。首先，WordPress将其重写规则缓存在数据库中，因此除非刷新这些规则，否则添加到主题中的新重写不会生效。
我可以在主题的functions.php或衍生文件中使用以下代码来重写所需的url：

function angular_redirects() {
    // Redirect to Angular app page
    // Omitted $ because we want to match every suffix stemmed from the pagename.
    add_rewrite_rule('(.?.+?\/angular)/', 'index.php?pagename=$matches[1]', 'top');

    // Equivalent to Settings > Permalinks > click save.
    // Your custom rule won't take effect until rules are flushed!
    // Make sure to remove this after testing that url rewrite works.
    flush_rewrite_rules();
}
add_action('init', 'angular_redirects');

此重写被添加到重定向列表的“顶部”，这意味着在任何内置重写之前遇到并匹配此重写。
结果是，Wordpress的get_permalink()函数返回要在中使用的wordpress页面的URL

<base url="<?php get_permalink(); ?>"/>

同时，浏览器中的URL以及<?php echo "$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]" ?>生成的值现在与用户输入的完整URL相匹配，因此Angular可以路由到所请求的任何子页面。
希望这个模糊的用例能帮助到其他人！

赞(0）回复(0）举报 2022-11-21

我来回答

php 将带有路线的Angular应用程序集成到多个帖子中使用的WordPress模板中

1条答案

相关问题

热门标签

最新问答