Question

我正在使用Beta（他们在官方教程中拥有的资源）

在我的Angular应用程序中，当在特定点导航应用程序时，我将不得不再次点击两次才能真正返回 - 几乎就像同一页面被推送到浏览器历史记录两次一样。

我无法弄清楚这是一个Angular 2错误，还是我的代码中有一些时髦的东西。

例如，以下网址，无论是直接输入地址栏还是导航到应用程序中，都需要按两次后退按钮才能实际返回：http://localhost:3000/products/strollers（product-list.component）。

以下是我认为相关的一些代码：

app.component.ts

// imports and whatnot
// ...

@Component({
    selector: 'rz-app',
    templateUrl: 'app/views/wrap.html',
    directives: [
        ROUTER_DIRECTIVES,
        NavComponent,
        CartWidgetComponent,
        PreloaderComponent
    ],
    providers: [
        ROUTER_DIRECTIVES,
        NavServices,
        CartServices,
        FavoriteServices
    ]
})


@RouteConfig([
    {
        path: '/',
        name: 'Home',
        component: TilesComponent,
        useAsDefault: true  
    },
    {
        path: '/home',
        name: 'Home',
        component: TilesComponent,
    },
    {
        path: '/categories',
        name: 'Categories',
        component: CategoryComponent
    },
    {
        path: '/category/:slug',
        name: 'Category',
        component: ProductListComponent
    },
    {
        path: '/pro-shop',
        name: 'The Pro Shop',
        component: StorefrontComponent
    },
    {
        path: '/world-traveler',
        name: 'The World Traveler',
        component: StorefrontComponent
    },
    {
        path: '/products/:slug',
        name: 'ProductsList',
        component: ProductListComponent
    },
    {
        path: '/products',
        name: 'Products',
        component: ProductListComponent
    },
    {
        path: '/product/:slug/:id',
        name: 'Product',
        component: ProductComponent
    }
])

export class AppComponent {

产品list.component.ts

@Component({
    selector: 'rz-product-list',
    directives: [SortComponent, SearchComponent, ROUTER_DIRECTIVES],
    pipes: [SortPipe, SearchPipe],
    templateUrl: 'app/views/products-list.html'
})


export class ProductListComponent {  
    // default title
    title = 'Product';
    products;
    sortValue;
    searchValue;

    /* for rz-sort */
    sort_options = [
        {
            label: "Lowest Price First",
            sortBy: "points",
        },
        {
            label: "Highest Price First",
            sortBy: "-points",
        },
        {
            label: "Brand Z-A",
            sortBy: "-brand",
        },
        {
            label: "Brand A-Z",
            sortBy: "brand",
        },
        {
            label: "Product Name Z-A",
            sortBy: "-name",
        },
        {
            label: "Product Name A-Z",
            sortBy: "name", 
        }
    ];

    // constructor of services
    constructor(
        private _router: Router, 
        private _routeParams: RouteParams, 
        private _favService: FavoriteServices
    { }

    // initialize
    ngOnInit() {

        var _param;
        _param = this._routeParams.params.slug;

        this.getProducts(_param);
        this.title = _param;
    }

    // ...

 }

的index.html

<html>
  <head>

    <base href="/">

    <title>Sriracha!!!</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">   

    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css"> 
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">

    <link rel="stylesheet" href="dist/assets/css/structure.css">
    <link rel="stylesheet" href="dist/assets/css/styles.css">
    <link rel="stylesheet" href="dist/assets/css/skins/minimal.css">
    <link rel="stylesheet" href="dist/assets/css/skins/tiles.css">
    <link rel="stylesheet" href="dist/assets/css/skins/usb.css">

    <!-- 1. Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>   
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="node_modules/angular2/bundles/router.dev.js"></script>
    <script src="node_modules/angular2/bundles/http.dev.js"></script>
    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        packages: {        
          dist: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });

      System.import('dist/main')
            .then(null, console.error.bind(console));
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <rz-app>
      <!-- Can't use preloader component here :( -->
      <div class="preloader-modal">
        <div class="preloader-content">
          <img src="dist/assets/images/preloader.gif"/>
          <p>Loading...</p>
        </div>
      </div>  
  </rz-app>
  </body>
</html>

不知道发生了什么事，有什么建议吗？

Answer 1

已停用的路由器

这是一个已知问题。无论如何，路由器目前正在重新设计。

重复的浏览器历史状态 - 路由器角度2

1 个答案: