Angular 6 роутер в плагине WordPress не работает в обновлении - PullRequest
Новая
       7

Angular 6 роутер в плагине WordPress не работает в обновлении

0 голосов
/ 10 июня 2018

Я делаю плагин WordPress, который на самом деле является приложением Angular 6 javascript.У меня есть следующие коды, чтобы он работал как короткий код в WordPress 

function msp_helloworld_load(){
    ob_start();
    wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'app/runtime.js' );
    wp_enqueue_script( 'my_custom_script1', plugin_dir_url( __FILE__ ) . 'app/polyfills.js' );
    wp_enqueue_script( 'my_custom_script2', plugin_dir_url( __FILE__ ) . 'app/styles.js' );
    wp_enqueue_script( 'my_custom_script3', plugin_dir_url( __FILE__ ) . 'app/vendor.js' );
    wp_enqueue_script( 'my_custom_script4', plugin_dir_url( __FILE__ ) . 'app/main.js' );    
    echo '<base href="' . $_SERVER[ 'REQUEST_URI' ] . '">';
    echo '<app-root></app-root>';
    echo ob_get_clean();
}
add_shortcode( 'helloworld', 'msp_helloworld_load' );

В этом приложении я использую простой маршрутизатор Angular 6, как этот 

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'contact',      component: ContactComponent }
];

Я встраиваю этот короткий кодв примере страницы WordPress как 

[helloworld]

, что хорошо рендеринга и маршрутизатор работает, пока я нажимаю на него.Два URL выглядят так:

http://localhost/wp/sample-page

http://localhost/wp/sample-page/contact

Проблема возникает при перезагрузке страницы.Он ничего не находит.

Мой .htaccess выглядит следующим образом 

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /hn/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /hn/index.php [N]    
RewriteRule ^ /sample-page/$1 [L]
</IfModule>
# END WordPress

Но все равно он не работает.Я не очень хорошо разбираюсь в .htaccess, поэтому, пожалуйста, помогите.

1 Ответ

0 голосов
/ 10 июня 2018

Здорово, я с этим разобрался.Вот решение, во-первых, вам не нужно прикасаться к .htaccess, так как он поставляется с установкой WordPress по умолчанию 

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /hn/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /hn/index.php [L]
</IfModule>
# END WordPress

Затем измените постоянную ссылку WordPress на postname

Тогда вот трюк, наБазовый тег указывает на страницу, в которую вы хотите вставить короткий код.Вы можете принять параметр от пользователя, чтобы он указывал базовый URL из записи контента, или вы можете даже сделать его динамическим, чтобы поместить URL страницы.Вот и все.

function msp_helloworld_load(){
    ob_start();
    wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'app/runtime.js' );
    wp_enqueue_script( 'my_custom_script1', plugin_dir_url( __FILE__ ) . 'app/polyfills.js' );
    wp_enqueue_script( 'my_custom_script2', plugin_dir_url( __FILE__ ) . 'app/styles.js' );
    wp_enqueue_script( 'my_custom_script3', plugin_dir_url( __FILE__ ) . 'app/vendor.js' );
    wp_enqueue_script( 'my_custom_script4', plugin_dir_url( __FILE__ ) . 'app/main.js' );    
    echo '<base href="http://localhost/wp/sample-page/">';
    echo '<app-root></app-root>';
    echo ob_get_clean();
}
add_shortcode( 'helloworld', 'msp_helloworld_load' );

Также добавьте пользовательскую перезапись URL 

function myplugin_rewrite_tag_rule() {  
    add_rewrite_rule( '^sample-page/([^/]*)/?', 'sample-page?city=$matches[1]','top' );
}
add_action('init', 'myplugin_rewrite_tag_rule', 10, 0);
...