Angular 2路由器(ES5)在页面重新加载时不起作用

发布时间：2020-12-17 07:56:31 所属栏目：安全来源：网络整理

导读：参见英文答案 Angular 2.0 router not working on reloading the browser26个我写了一个简单的Angular 2应用程序.除了一件事,一切都很好.当我点击路由器链接时,更改了Url并加载了组件,然后当我重新加载页面时,我找不到404.无法理解为什么？这是我的代码：

参见英文答案 > Angular 2.0 router not working on reloading the browser26个
我写了一个简单的Angular 2应用程序.除了一件事,一切都很好.当我点击路由器链接时,更改了Url并加载了组件,然后当我重新加载页面时,我找不到404.无法理解为什么？

这是我的代码：

(function(app) {


  app.AppComponent =
    ng.core.Component({
      selector: 'my-app',template: '<a [routerLink]="['Component1']">Component1</a>' + 
                '<a [routerLink]="['Component2']">Component2</a>' + 
                '<router-outlet></router-outlet>',directives: [
            ng.router.ROUTER_DIRECTIVES
      ]
    })
    .Class({
      constructor: function() {}
    });


    app.AppComponent = ng.router.RouteConfig([

    {
        path: '/component1',component: app.Component1,name: 'Component1' 
    },{
        path: '/component2',component: app.Component2,name: 'Component2' 
    }
    ]) ( app.AppComponent );


})(window.app || (window.app = {}));

任何帮助将不胜感激！

这是一个浏览器功能.
默认情况下,Angular使用HTML5 pushstate(Angular slang中的PathLocationStrategy).
您需要一个处理所有请求的服务器,例如它请求index.html,或者您切换到HashLocationStrategy(在路由的URL中使用#) https://angular.io/docs/js/latest/api/router/HashLocationStrategy-class.html

另见https://ngmilk.rocks/2015/03/09/angularjs-html5-mode-or-pretty-urls-on-apache-using-htaccess/

要切换到HashLocationStrategy使用

bootstrap(AppCmp,[
  ROUTER_PROVIDERS,provide(LocationStrategy,{useClass: HashLocationStrategy})
]);

确保您拥有所有必需的进口

import {provide} from 'angular2/angular2';
import {
  HashLocationStrategy
  LocationStrategy,ROUTER_PROVIDERS,} from 'angular2/router';

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!