为啥要给“抽象：真实”状态一个 url？

Posted 2023-02-16

【中文标题】为啥要给“抽象：真实”状态一个 url？

【英文标题】：Why give an "abstract: true" state a url?为什么要给“抽象：真实”状态一个 url？

【发布时间】：2016-01-15 20:37:01

【问题描述】：

我今天一直在摆弄 ui-router，试图更好地理解 Ionic 中的脚手架，我注意到的一件事是它们为“标签”的抽象状态提供了一个 url。

我唯一一次使用抽象状态，我使用空字符串作为 url，我注意到如果我不小心尝试导航到抽象状态（而不是子状态），我会得到错误：

无法转换到抽象状态“[insertAbstractStateHere]”

编辑：

“此外，在实验中，当我尝试将 url 分配给我的抽象状态（在 Ionic 之外）并仍然渲染嵌套状态视图时，我得到了一个大鹅蛋。什么都没有出现。”

以上引用的陈述是错误的！我在Plunker 中再次尝试，嵌套状态确实出现了。

 angular.module('routingExperiments', ['ui.router'])
      .config(function($urlRouterProvider, $stateProvider) 

    $stateProvider

      .state('abstractExperiment', 
        abstract: true,
        url: '', //<--- seems as if any string can go here.
        templateUrl: 'abstractExperiment.html'
      )
      .state('abstractExperiment.test1', 
        url: '/test1',
        templateUrl: 'abstractTest1.html'
      );
  );

显然我确实做错了。所以我的新问题是：

在使用抽象状态时，是否有任何理由使用命名状态而不是空字符串，或者它只是一种样式选择？

【参考方案1】：

您使用抽象状态的原因是在您的部分网址不可导航时保持您的定义干燥。例如，假设您有一个如下所示的 url 方案：

/home/index
/home/contact

但是，无论出于何种设计原因，此 url 都是无效的（即页面没有目的）：

/home

现在您可以简单地为这种情况创建两个状态，使用完整的 url，但是您会写两次 /home/，并且描述有点复杂。最好的办法是创建一个 home 抽象父级，其他两个状态是子级（对于 ui-router 文档）：

$stateProvider
    .state('parent', 
        url: '/home',
        abstract: true,
        template: '<ui-view/>'
    )
    .state('parent.index', 
        url: '/index',
        templateUrl: 'index.html'
    )
    .state('parent.contact', 
        url: '/contact',
        templateUrl: 'contact.html'
    )

请注意，在父状态中，我们分配了一个模板，其唯一的孩子是ui-view。这可以确保渲染孩子（这可能是您的孩子出现空白的原因）。

---

有时您可能会注意到带有空白 url 的抽象状态的使用。此设置的最佳用途是当您需要父母 resolve 时。例如，您可能需要一些特定的服务器数据用于您的状态子集。因此，您可以创建一个具有所需解析的空白 url 父级，而不是将相同的解析函数放入每个状态。如果您想要分层控制器，它也可能很有用，其中父级对视图没有用处（不确定您为什么想要这个，但它是合理的）。

【讨论】：

谢谢，马特。但是，您是否曾经在有'/home' 的地方使用过空字符串？在这一点上，这更多是我困惑的根源。为什么做一个而不是另一个？好像没什么区别。

为您添加了扩展信息 :)

@MattWay 你能否也将 .otherwise 状态设置为抽象状态？或者这个不推荐。

您好，感谢您的解释！在一些教程中，我在子状态选项中看到了一个字段parent: '<state name>'，为什么这里没有它，ui-router 是否能够使用点作为分隔符从状态名称映射关系？抱歉，我刚刚开始学习/使用 ui-router。

傻我，答案几乎不在front上，是的，它能够使用点分隔符来建立状态层次结构

【参考方案2】：

.state('home', 
        url: '/home',
        abstract:true,                        
        controller: "HomeController",
        templateUrl:"path to your html"                       
)
.state('home.list', 
        url:"",
        controller: "HomelistController",
        templateUrl:"path to your html" 
)

【参考方案3】：

使用抽象状态，也可以让 ui 路由器在不重新加载控制器/页面的情况下进行导航。