0

我开始使用 Angular 处理一个遗留项目1.5，它同时使用href和ui-sref.

我真的不明白使用后者的意义，尤其是对于顶级菜单。

例子

菜单.html

<a ui-sref="expense-home">
    <i class="fa fa-money"></i>
    <translate>Expenses claims</translate>
</a>

app.route.js

.state('expense-home', {
    url: '/expenses',
    template: '<expenses-home></expenses-home>',
})

问题

您能否提供一些有用的优缺点ui-sref和场景？

4

2 回答 2

2

优点：

1. url抽象

使用的最重要的好处ui-sref是您可以处理状态名称，它是对 url 地址的一些抽象。

因此，在使用时，ui-sref您真的独立于实际的 url，例如，如果您决定更改它们（相信我，确实发生了；））您只需更改.state配置，应用程序中的所有 url 都会更改。

通过这种方式，您还可以本地化您的 url，例如在某些情况下ui-sref="contact"指向/contact-uswhile 在其他情况下指向/kontaktiere.

2. 独立于参数顺序

另一件事是，当您必须将多个参数传递到您的 url 时（例如，url 定义是users/:userId/albums/:albumId），您不需要记住/关心参数的顺序，只需使用对象：

<a ui-sref="albumDetails({userId: user.id, albumId: album})">
  {{album.name}}
</a>

3. href attr 预防的未插值

除此之外，正如另一个答案指出的那样，当您href直接使用时，在您的应用程序生命周期中的某个时刻，浏览器看到的是<a href="{{ sth }}">- Angular 尚未插入表达式 - 如果您单击此类链接它' d 尝试将您指向类似的内容http://example.com/%7B%7B%20sth%20%7D%7D。 ng-href, ui-sref（在图像上最明显ng-src）可以防止这种情况发生，因为它们不是被浏览器解释的东西。

缺点：

至于缺点 - 我还没有遇到一个:)

于 2016-11-18T19:23:55.227 回答
1

href（以及 ng-href）生成一个由浏览器解释的实际链接（它可以是任何 URL，甚至是外部 URL），并且 ui-sref 由 javascript 处理。

于 2016-11-18T19:26:38.743 回答