Angular UI-Router：URL已更改但未加载视图 [英] Angular UI-Router : URL changed but view isn't loaded
问题描述
我正在使用嵌套视图处理我的UI-Router应用程序。我定义了一些这样的状态：
I'm working on my UI-Router app with nested views. I defined some states like this:
$stateProvider
.state('parent', {
url: "/parent",
views: {
'area1': {templateUrl : 'parentView.html'},
'area2' : ... // some other areas + template
}
})
.state('parent.child1', {
url: "/child1",
views: {
'area1' : {templateUrl : 'child1View.html'},
'area2' : ... // still some other areas, not changing
}
})
.state('parent.child2', {
url: "/child2",
views: {
'area1' : {templateUrl : 'child2View.html'},
'area2' : ... // still some other areas, not changing
}
})
使用应用程序时，我将主视图分为几个区域。在第一个区域，我使用特定的html文件。如果我点击链接，应用程序将使用 $ state.go（'myState'）进入子状态。此时，URL已更改，但子视图未加载到页面中。
When using the app, I have a main view divided into some areas. In the 1st area, I use a specific html file. If I click on a link, the app goes to a child state using $state.go('myState'). At that time, the URL is changed but the child view isn't loaded in the page.
我在网站上搜索了答案，我发现这个问题来自另一个似乎在这里遇到同样问题的人： Angular Router - Url更改但视图无法加载
I searched for answers in the site, and I found this question from another one who seems to encounter the same problem here : Angular Router - Url changes but view does not load
你知道我错过了什么吗？
Do you know what I missed?
对不起英语不好
推荐答案
index.html 最有可能包含以下目标：
Most likely the index.html contains these targets:
<body>
<div ui-view="area1"></div>
<div ui-view="area2"></div>
...
因此，如果父母和孩子同时针对这些，我们需要使用绝对命名：
So, if both, parent and child do target these, we need to use absolute naming:
.state('parent.child1', {
url: "/child1",
views: {
'area1@' : {template : '<h2>child 1 area 1 </h2>'},
'area2@' : {template : '<h2>child 1 area 2</h2>'},
}
})
.state('parent.child2', {
url: "/child2",
views: {
'area1@' : {template : '<h2>child 2 area 1 </h2>'},
'area2@' : {template : '<h2>child 2 area 2</h2>'},
}
})
让我们观察一下doc：
Let's observe doc:
幕后，每一个视图被赋予一个绝对名称，该名称遵循
viewname @ statename的方案，其中viewname是视图指令中使用的名称，状态名称是州的绝对名称，例如contact.item。您也可以选择以绝对语法编写视图名称。
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@': { }
}
})
所以，我们的孩子需要使用1）查看目标名称2）分隔符@和3）状态名称（在我们的字符串空代表根目录）： 'area1 @'
So, our child needs to use 1) view target Name 2) delimiter @ and 3) the state name (in our string empty representing the root): 'area1@'
这些链接类似于$ state.go （）现在可以使用：
These links, similar to $state.go() will work now:
<a ui-sref="parent">
<a ui-sref="parent.child1">
<a ui-sref="parent.child2">
检查这里
这篇关于Angular UI-Router：URL已更改但未加载视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
