嵌套没有嵌套的视图界面路由器的状态?嵌套、视图、路由器、界面

2023-09-14 00:09:42 作者:赐我梦境

我不知道是否有可能有一个嵌套的状态,没有一个嵌套的视图。假设我有这样的设置:

 的App.config(函数($ stateProvider,$ urlRouterProvider){    //    //    //现在设置状态    $ stateProvider    .STATE('指数',{        网址:/指数,       templateUrl:意见/ /home.html的,        控制器:MainController        ncyBreadcrumb:{            标签:家        }    })    .STATE(关于,{        网址:/约        templateUrl:意见/ about.html        控制器:AboutController        ncyBreadcrumb:{            标签:关于,            父:索引        }    })    .STATE('我们',{        网址:/我们,        templateUrl:意见/ us.html        控制器:UsController        父:关于,        ncyBreadcrumb:{            标签:'我们'        }    })    //    //对于任何无与伦比的URL,重定向到/ home    $ urlRouterProvider.otherwise(/指数);}); 

当我访问 /约,我得到的有关页​​面。当我访问 /约/我们,我仍然得到关于页面在加载的美国页面用户界面视图的有关页面。不过,我想这样做是加载关于页面上的 /约和刚上美国页/我们 。这可能吗?

解决方案

是的,它是可能的。我们有什么用,是绝对的命名。国家确定指标应该是这样的:

  .STATE('我们',{    网址:/我们,    观点:{      @:{//这里我们使用的是绝对名称目标        templateUrl:意见/ us.html        控制器:UsController      },    }    父:关于,    ncyBreadcrumb:{        标签:'我们'    }}) 

请参阅文档:

View名称 - 相对与绝对名称

  

在幕后,每一个观点被分配遵循的方案绝对名称 视图名@ Statename的 ,其中视图名是所使用的名称view指令和国家名称是国家的绝对名称,例如: contact.item。您也可以选择在绝对语法来写你的视图名称。

    nuxt.js 多重动态路由嵌套,路由变化,页面不变化问题

例如,在previous例如也可以写为:

  .STATE('报告',{    观点:{      过滤器@:{},      资料表@:{},      图@:{}    }}) 

因此​​,作为文档显示,我们可以使用绝对命名。在我们的例子中,我们将针对这NAMS为空字符串(的index.html)根州 - 分隔符@后面的部分。它是无名的观点 - 前@弦空。这就是为什么我们使用:

 的意见:{      @:{ 

的注:在幕后, UI-路由器使用该国有我们

 的意见:{      @关于 : { 

有一个工作plunker ,在行动以下状态:

  //国$ stateProvider  .STATE('指数',{    网址:/指数,    templateUrl:tpl.html',  })  .STATE('约',{    网址:/约    templateUrl:tpl.html',  })  .STATE('我们',{    网址:/我们,    父:左右,    观点:{      '@':{        templateUrl:tpl.html',      },    }  }) 

检查它行动的,如果我们是一个国家的名字与UI SREF =US将正确定位到/约/我们

I'm wondering if it's possible to have a nested state without a nested view. Suppose I have this setup:

App.config(function($stateProvider, $urlRouterProvider) {
    //
    //
    // Now set up the states
    $stateProvider
    .state('index', {
        url: "/index",
       templateUrl: "views/home.html",
        controller: "MainController",
        ncyBreadcrumb: {
            label: 'Home'
        }
    })
    .state('About', {
        url: "/about",
        templateUrl: "views/about.html",
        controller: "AboutController",
        ncyBreadcrumb: {
            label: 'About',
            parent: 'index'
        }
    })
    .state('us', {
        url: "/us",
        templateUrl: "views/us.html",
        controller: "UsController",
        parent: 'about',
        ncyBreadcrumb: {
            label: 'Us'
        }
    })
    //
    // For any unmatched url, redirect to /home
    $urlRouterProvider.otherwise("/index");

});

When I visit /about, I get the about page. When I visit /about/us, I still get the about page with the us page loaded in the ui-view of the about page. However, what I would like to do is load the about page on /about and just the us page on /us. Is this possible?

解决方案

Yes it is possible. What we have to use, is the absolute naming. State defintion would look like this:

.state('us', {
    url: "/us",
    views : {
      "@" : { // here we are using absolute name targeting
        templateUrl: "views/us.html",
        controller: "UsController", 
      },
    }
    parent: 'about',
    ncyBreadcrumb: {
        label: 'Us'
    }
})

See doc:

View Names - Relative vs. Absolute Names

Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname@statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.

For example, the previous example could also be written as:

.state('report',{
    views: {
      'filters@': { },
      'tabledata@': { },
      'graph@': { }
    }
})

So as documentation shows, we can use absolute naming. In our case, we will target root state which nams is string empty (index.html) - the part after delimiter @. And it is unnamed view - string Empty before @. That is why we use:

    views : {
      "@" : {

NOTE: behind the scenes, UI-Router used this for state us:

    views : {
      "@about" : {

There is a working plunker, with these states in action:

// States
$stateProvider

  .state('index', {
    url: "/index",
    templateUrl: 'tpl.html',
  })
  .state('about', {
    url: "/about",
    templateUrl: 'tpl.html',
  })
  .state('us', {
    url: "/us",
    parent: "about",
    views : {
      '@': {
        templateUrl: 'tpl.html',
      },
    }
  })

Check it in action that if the 'us' is a state name the ui-sref="us" will properly navigate to '/about/us'.