AngularJs 带参数的路由

Posted 2023-03-05

【中文标题】AngularJs 带参数的路由

【英文标题】：AngularJs Routing with parameters

【发布时间】：2017-02-10 05:33:37

【问题描述】：

有人可以解释我如何使用参数路由到 URL 吗？

例如id 喜欢点击产品并通过 Id 打开产品的更多信息。

到目前为止我的路线......

        angular.module('shop', ["customFilters", "cart", "ngRoute"])
        .config(function ($routeProvider)

            $routeProvider.when("/complete", 
                templateUrl: "../app/views/orderComplete.html"
            );

            $routeProvider.when("/placeorder", 
                templateUrl: "../app/views/placeOrder.html"
            );

            $routeProvider.when("/checkout", 
                templateUrl: "../app/views/checkoutSummary.html"
            );

            $routeProvider.when("/products", 
                templateUrl: "../app/views/productList.html"
            );

            $routeProvider.when("/product:", 
                templateUrl: "../app/views/product.html"
            );

            $routeProvider.otherwise(
                templateUrl: "../app/views/productList.html"
            );

        );

所以通过点击...

<a class="btn btn-default" href="#/product/item.id">More Info</a>

我想被路由到 product/id.html ...

有人可以告诉我我在...中缺少什么

       $routeProvider.when("/product:id", 
            templateUrl: "../app/views/product.html"
        );

【问题讨论】：

使用github.com/angular-ui/ui-router

【参考方案1】：

两件事，但你基本上都在那里。

首先，您在 URL 参数之前缺少一个斜杠。发生在我们最好的人身上。

routeProvider.when("/product/:id", 
    templateUrl: "../app/views/product.html"
);

其次，当您有动态 URL 参数时，您应该使用 ng-href 而不是 href。

<a ng-href="#/product/item.id">More Info</a>

【讨论】：

谢谢老兄，在编码数小时后，多一双眼睛始终是关键。感谢@enzey 的帮助！

我有一个问题，如果你有 /product/new 怎么办......你如何添加它？

【参考方案2】：

我认为这个问题是重复的，请参阅回复How to pass parameters using ui-sref in ui-router to controller

您可以将参数发送到状态名称为 home(foo: 'fooVal1', bar: 'barVal1') 带有 url '/:foo?bar' 看这个例子：

$stateProvider
    .state('home', 
      url: '/:foo?bar',
      views: 
        '': 
          templateUrl: 'tpl.home.html',
          controller: 'MainRootCtrl'

        ,
        ...
      

并将值发送为：

<a ui-sref="home(foo: 'fooVal1', bar: 'barVal1')">