尝试在wordpress仪表板中嵌入angular应用程序：是否可以在没有添加菜单页面功能的情况下创建自定义管理页面？

我正试图在wordpress的仪表板中嵌入一个Angular应用程序。最初，我在仪表板中创建了一个自定义菜单，如下所示：

add_menu_page( 'My App', 'My App', 'manage_options', 'my_app', 'showMyApp', null, 2 );

function showMyApp() {
    if ( ! current_user_can( 'manage_options' ) ) {
        wp_die( __( 'You do not have sufficient permissions to access this page.' ) );
    }


    wp_enqueue_script( 'r_my_app_runtime', "/wp-content/plugins/r_my_app/MyApp/dist/runtime.js", null, true );
    wp_enqueue_script( 'r_my_app_polyfills', "/wp-content/plugins/r_my_app/MyApp/dist/polyfills.js", null, true );

    wp_enqueue_script( 'r_my_app_vendor', "/wp-content/plugins/r_my_app/MyApp/dist/vendor.js", null, true );
    wp_enqueue_script( 'r_my_app_main', "/wp-content/plugins/r_my_app/MyApp/dist/main.js", null, true );

    wp_enqueue_style( 'r_my_app_angular_material_fonts', 'https://fonts.googleapis.com/css?family=Roboto:300,400,500' );
    wp_enqueue_style( 'r_my_app_styles', "/wp-content/plugins/r_my_app/MyApp/dist/styles.css" );
    //Bootstrap
    wp_enqueue_style( 'r_my_app_bootstrap_css', 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css' );
    wp_enqueue_script( 'r_my_app_popper', "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js", null, true );
    //End bootstrap

    echo ' <app-root></app-root> ';

}

左侧菜单中的新菜单项出现，当我单击菜单项时，我被重定向到

/wp admin/admin.php？page=my_应用程序

showMyApp方法加载所有需要的stuf（angular框架等），并显示angular应用程序的主页。但一旦angular应用程序加载，事情就开始变得奇怪，因为angular路由

此angular应用程序是一个包含两个组件的小应用程序：母版页和详细信息页，在路由模块中定义如下：

const routes: Routes = [
    {path: 'main-list', component: MainListComponent},
    {path: 'detail', component: DetailComponent},
];

这里发生的事情是，一旦angular应用程序加载，浏览器中的url

/wp admin/admin.php？page=my_应用程序

被重定向到：

/wp admin/admin.php/main list？page=my_app

这对于一个普通的有角度的应用程序来说是正确的，但对于wordpress中的一个被挪用的应用程序来说则不然

因此，我正在寻找一种在仪表板中创建自定义页面的方法，例如：

/wp-admin/edit.php

或

但在我的例子中，类似于“/wp admin/my_app.php”的东西，并在这里呈现我的angular应用程序。我想，通过这种方式，angular应用程序导航的url段将附加到url，如下所示

/wp admin/my_app.php/main-list

也许这就是诀窍

或者，如果您知道在wordpress的仪表板中嵌入angular应用程序的另一种方法，我们将不胜感激

---

问候。

我自己设法解决了

重要的是：

1.-角度应用程序标题中的值必须为：

<base href="/wp-admin/admin.php">

最后，在html中导航或嵌入链接时，url中必须始终存在查询参数“page=my_app”。因此，我嵌入了如下链接：

<a routerLink="/main-list" [queryParams]="{page:'my_app'}">Main List</a>

主列表

现在布线工作正常，angular应用程序（我现在使用angular 5）可以根据需要拥有任意多的视图/组件。angular应用程序位于wordpress的自定义管理页面内

问候

回答SilverColt（为迟来的回答道歉）。在我的wordpress插件中，我执行以下操作：

add_menu_page( 'My App', 'My App', 'manage_options', 'my_app', 'showMyApp', null, 2 );

function showMyApp() {
    if ( ! current_user_can( 'manage_options' ) ) {
        wp_die( __( 'You do not have sufficient permissions to access this page.' ) );
    }


    wp_enqueue_script( 'r_my_app_runtime', "/wp-content/plugins/r_my_app/MyApp/dist/runtime.js", null, true );
    wp_enqueue_script( 'r_my_app_polyfills', "/wp-content/plugins/r_my_app/MyApp/dist/polyfills.js", null, true );

    wp_enqueue_script( 'r_my_app_vendor', "/wp-content/plugins/r_my_app/MyApp/dist/vendor.js", null, true );
    wp_enqueue_script( 'r_my_app_main', "/wp-content/plugins/r_my_app/MyApp/dist/main.js", null, true );

    wp_enqueue_style( 'r_my_app_angular_material_fonts', 'https://fonts.googleapis.com/css?family=Roboto:300,400,500' );
    wp_enqueue_style( 'r_my_app_styles', "/wp-content/plugins/r_my_app/MyApp/dist/styles.css" );
    //Bootstrap
    wp_enqueue_style( 'r_my_app_bootstrap_css', 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css' );
    wp_enqueue_script( 'r_my_app_popper', "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js", null, true );
    //End bootstrap

    echo ' <app-root></app-root> ';

}

将新菜单选项添加到wp仪表板：

add_action( 'admin_menu', function () {
    add_menu_page( 'MyApp', 'MyApp', 'manage_options', 'mi_app', 'showMyApp', null, 2 );
} );

showMyApp PHP方法执行以下操作：

add_menu_page( 'My App', 'My App', 'manage_options', 'my_app', 'showMyApp', null, 2 );

function showMyApp() {
    if ( ! current_user_can( 'manage_options' ) ) {
        wp_die( __( 'You do not have sufficient permissions to access this page.' ) );
    }


    wp_enqueue_script( 'r_my_app_runtime', "/wp-content/plugins/r_my_app/MyApp/dist/runtime.js", null, true );
    wp_enqueue_script( 'r_my_app_polyfills', "/wp-content/plugins/r_my_app/MyApp/dist/polyfills.js", null, true );

    wp_enqueue_script( 'r_my_app_vendor', "/wp-content/plugins/r_my_app/MyApp/dist/vendor.js", null, true );
    wp_enqueue_script( 'r_my_app_main', "/wp-content/plugins/r_my_app/MyApp/dist/main.js", null, true );

    wp_enqueue_style( 'r_my_app_angular_material_fonts', 'https://fonts.googleapis.com/css?family=Roboto:300,400,500' );
    wp_enqueue_style( 'r_my_app_styles', "/wp-content/plugins/r_my_app/MyApp/dist/styles.css" );
    //Bootstrap
    wp_enqueue_style( 'r_my_app_bootstrap_css', 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css' );
    wp_enqueue_script( 'r_my_app_popper', "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js", null, true );
    //End bootstrap

    echo ' <app-root></app-root> ';

}

函数showMyApp（）{
如果（！当前用户可以（'管理选项'））{
wp_die（u uu（'您没有足够的权限访问此页面'）；
}
wp_enqueue_脚本（'r_my_app_runtime'，“/wp content/plugins/r_my_app/MyApp/dist/runtime.js”，null，true）；
wp_enqueue_脚本（'r_my_app_polyfills'，“/wp content/plugins/r_my_app/MyApp/dist/polyfills.js”，null，true）；
wp_enqueue_脚本（'r_my_app_vendor'，“/wp content/plugins/r_my_app/MyApp/dist/vendor.js”，null，true）；
wp_enqueue_脚本（'r_my_app_main'，“/wp content/plugins/r_my_app/MyApp/dist/main.js”，null，true）；
wp_enqueue_样式（'r_my_app_angular_material_fonts'，'https://fonts.googleapis.com/css?family=Roboto:300,400,500' );
wp_enqueue_style（'r_my_app_style'，“/wp content/plugins/r_my_app/MyApp/dist/styles.css”）；
//引导
wp_排队_样式（'r_my_app_bootstrap_css'，'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css' );
wp_排队_脚本（'r_my_app_popper'，”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js“，null，true）；
//端引导
回声'；
}

如您所见，showMyApp方法加载与angular应用程序相对应的javascript，以及一些其他内容，如css等。然后，该应用程序在wp仪表板的主要内容中呈现，您在wp仪表板中有一个水疗中心

如果您想在前端进行水疗，也可以实现同样的效果。但是在本例中，我使用一个自定义模板来加载内容，并且我使用这个自定义模板在前端的一个空页面上加载SPA

---

希望有帮助

不确定它是否有用，但值得一看：还有（如何拦截管理员页面）您好。我想知道你是否可以分享更多的代码。我很难理解如何让angular应用程序在子菜单管理页面（添加子菜单页面）中返回。您在最初的问题“showMyApp方法，加载所有需要的stuf（angular框架，等等），并显示angular应用程序的主页”中提到了以下内容-您能分享这篇文章吗？不知道如何让应用程序自动引导到wordpress管理页面。我还想指定哪个组件直接引导到这个管理页面。非常感谢。我添加了一个新的答案，为您提供了更多详细信息。