Angular2-Dart PathLocationStrategy答案

【问题标题】：Angular2-Dart PathLocationStrategyAngular2-Dart PathLocationStrategy
【发布时间】：2017-02-10 01:19:19
【问题描述】：

使用 HashLocationStrategy 刷新 angular2 dart 页面效果很好，因为它打开了完全相同的视图。

使用 PathLocationStrategy 刷新页面 - 将 tomcat 服务器配置为服务 index.html - 适用于不带参数的 url，但不适用于带参数的 url。

localhost:8090/menu1 // 刷新作品
localhost:8090/menu2/paramVal // 不刷新

tomcat web.xml 有

  <error-page>
    <error-code>404</error-code>
    <location>/index.html</location>
  </error-page>

main.dart

main() {  
      bootstrap(AppComponent, [  
      ROUTER_PROVIDERS,  
      provide(APP_BASE_HREF, useValue: '/')]);  
}

app_component.dart

import 'package:angular2/core.dart';
import 'package:angular2/router.dart';
import 'package:angular2/angular2.dart';
import 'package:mboxes/menu1.dart';
import 'package:mboxes/menu2.dart';

@Component(
    selector: 'my-app',
    templateUrl: 'app_component.html',
    directives: const [ROUTER_DIRECTIVES],
    providers: const[ROUTER_PROVIDERS, ])

@RouteConfig(const [
  const Route(
      path: '/menu1',
      name: 'Menu1',
      component: Menu1Component,
      useAsDefault: true),
  const Route(
      path: '/menu2/:param', name: 'Menu2', component: Menu2Component)
])
class AppComponent {}

app_component.html

<div class="container">
    <nav>
        <ul>
            <li>
                <a [routerLink]="['Menu1']">Menu1</a>
            </li>
            <li> <a [routerLink]="['Menu2', {'param':'paramVal'}]">Menu2</a> </li>
        </ul>
    </nav>

    <div style="padding-left: 200px; padding-top: 200px; padding-bottom: 50px">
    <router-outlet></router-outlet>
    </div>
</div>

menu1.dart

import 'package:angular2/core.dart';
import 'package:angular2/router.dart';
@Component(
    selector: 'menu1',
    template: ''' menu 1 was clicked '''
)
class Menu1Component {}

menu2.dart

import 'package:angular2/core.dart';
import 'package:angular2/router.dart';
@Component(
    selector: 'menu2',
    template: ''' menu 2 was clicked'''
)
class Menu2Component implements OnInit {
  final RouteParams _routeParams;
  Menu2Component(this._routeParams);
  ngOnInit()  {
    var val  = _routeParams.get('param');
    print  ("passed param is " +  val);
  }
}

【问题讨论】：

应用程序是在根文件夹中提供服务还是 heros 是详细文件夹。通常除了配置PathLocationStrategy（默认）并将对不存在的URL的请求重写为index.html之外，别无他法。
我只有两个文件夹 - web 文件夹包含 index.html 和 lib 文件夹包含所有其他组件
应用程序正在从根文件夹提供服务。带参数的 URL 不会刷新。没有参数的 URL 可以刷新。
您能否更新问题以更清楚地了解您看到的错误？ “不起作用”是什么意思？

标签： dart angular2-dart

【解决方案1】：

而不是使用 404 来服务 index.html 我想你想设置一个 servlet-mapping 类似 <url-pattern>*</url-pattern>

另见Tomcat servlet, redirect all urls to a single webpage

【讨论】：