Попытка встроить угловое приложение в панель управления WordPress: возможно ли создать пользовательскую страницу администратора без функции add_menu_page?

Question

Я пытаюсь встроить приложение Angular в панель управления WordPress. Первоначально я создал пользовательское меню на панели инструментов, как показано ниже:

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

Появляется новый пункт меню в левом меню, и когда я щелкаю по пункту меню, я перенаправляюсь на

/ WP-администратора / admin.php? Страница = my_app

Метод showMyApp загружает все необходимые вещи (угловые рамки и т. Д.), И отображается главная страница углового приложения. Но сразу и как только угловое приложение загружается, из-за угловой маршрутизации все становится странным.

Это угловое приложение представляет собой небольшое приложение с двумя компонентами: главной страницей и страницей сведений, определенной в модуле маршрутизации следующим образом:

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

Что здесь происходит, так это то, что как только угловое приложение загружается, URL в браузере был

/ WP-администратора / admin.php? Страница = my_app

перенаправлен на:

/ WP-администратора / admin.php / основной список? Страница = my_app

Это было бы правильно, для обычного углового приложения, но не для встроенного приложения в WordPress.

В связи с этим я ищу способ создать пользовательскую страницу на панели инструментов, например:

/wp-admin/edit.php

или

/wp-admin/edit-comments.php

но в моем случае, что-то вроде "/wp-admin/my_app.php" и визуализируйте здесь мое угловое приложение. Я полагаю, что таким образом сегменты URL для навигации по угловому приложению будут добавляться к URL как

/ WP-администратора / my_app.php / главный-лист

И, возможно, это помогает.

Или, если вы знаете другой способ встроить угловое приложение в панель управления WordPress, любая помощь будет признательна.

Привет.

Answer 1

Ответ на SilverColt (извиняюсь за очень поздний ответ). В моем плагине WordPress я делаю следующее:

Добавление новой опции меню на панель управления wp:

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

И метод showMyApp PHP делает следующее:

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 загружает javascript, соответствующий угловому приложению, и некоторые другие вещи, такие как css и так далее. Затем это приложение отображается внутри основного содержимого панели мониторинга wp, и у вас есть SPA, расположенный внутри панели мониторинга wp.

То же самое может быть достигнуто, если вы хотите иметь SPA во внешнем интерфейсе. Но в этом случае я делаю это с помощью пользовательского шаблона, который загружает содержимое, и я использую этот пользовательский шаблон для пустой страницы во внешнем интерфейсе, куда будет загружен SPA.

Надеюсь, это поможет!

Answer 2

Мне удалось решить это самостоятельно.

Важным является:

1.- в заголовке для углового приложения должно быть:

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

2.- Мой модуль маршрутизации в угловом приложении остается таким:

const routes: Routes = [
    {path: 'main-list', component: MainListComponent},
    {path: 'detail', component: DetailComponent},
     {path: '**', redirectTo: '/main-list?page=my_app', pathMatch: 'full'}
];

И, наконец, при навигации или встраивании ссылок в html параметр запроса "page = my_app" должен всегда присутствовать в URL. Из-за этого я встраиваю такие ссылки:

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

И теперь маршрутизация работает хорошо, и приложение angular (сейчас я использую angular 5) может иметь столько видов / компонентов, сколько необходимо. Угловое приложение находится на пользовательской странице администратора WordPress.

Привет!