ui-router 不与父/子组件一起路由
Posted
技术标签:
【中文标题】ui-router 不与父/子组件一起路由【英文标题】：ui-router not routing with parent/child components 【发布时间】：2017-09-16 00:03:52 【问题描述】：我无法找到与我的问题类似的任何内容。我确实找到了Angular ui-router's nested routes not working in ES6 with bable?，他们正在描述发生在我身上的事情，即根级路由似乎可以工作，但是如果我尝试设置子路由，则应用程序中不会显示任何内容并且 url 失败路线。
app.config.js
export default function routing ($urlRouterProvider)
$urlRouterProvider.otherwise('/');
index.html
<!DOCTYPE html>
<html ng-app="app" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Learning Library</title>
</head>
<body>
<div class="container">
<ui-view></ui-view>
</div>
</body>
</html>
app.routes.js
export default function AppRoutes ($stateProvider)
$stateProvider
.state('home',
url: '/',
component: 'home'
);
home/home.html
<div class="row">
<h1 class="col-12">Learning Library</h1>
</div>
<add-resource></add-resource>
<ui-view></ui-view>
组件/index.js
import HomeComponent from './home';
import LibraryComponent from './library';
import routing from './app.routes';
export default angular.module('app.components', [
HomeComponent,
Resource,
LibraryComponent,
uirouter
])
.config(routing)
.run(($rootScope) =>
// this is not showing any errors
$rootScope.$on('$stateChangeError', console.log.bind(console));
)
.name;
library.routes.js
export default function LibraryRoutes ($stateProvider)
$stateProvider
.state('home.library',
url: '/library',
component: 'library'
)
.state('library.list',
url: '/list',
views:
'library': 'libraryList'
,
);
库/index.js
import ResourceService from '../resource/resource.service';
import routing from './library.routes';
export default angular.module('app.components.library', [
LibraryListComponent,
LibraryListResourceComponent,
ResourceService,
])
.config(routing)
.component('library', LibraryComponent)
.name;
图书馆/图书馆.html
<div class="row">
<section class="library col-12">
<h3>Resources</h3>
<ui-view="library"></ui-view>
</section>
</div>
home 组件使用 ui-router 1.0.0 可以正常显示在应用程序中，但 library 不会。如果我将/library 路由的名称命名为library 而不是home.library，那么我可以转到/library 并显示基本库模板，但子libraryList 组件仍然无法加载.我尝试了各种约定来标记正确的容器（$default@home、^、$default 等），但似乎没有任何效果。使用home.library 名称，或使用library 名称和显式parent: 'home'，转到/library 会重定向回/。
我的配置一定有问题，但我无法放置什么。我试图将写入状态的方式切换为链接问题中建议的方法，但这似乎产生了相同的结果。我正在使用 Webpack 并通过 Babel 转译到 ES2015。
【问题讨论】：
【参考方案1】：我现在明白我哪里出错了；我对 ui-router 的工作原理有一个根本性的误解。
出于某种原因，我认为即使我设置了 url 配置，使用状态也会将模板分配给没有路由的视图，这样转到 / 会显示完全按照我设置视图的方式组装的页面，并且转到/library 将只显示库组件。但实际上，由于我将 url 设置为 /library，它只会在我将页面路由到该 url 时显示，并且由于我实际上没有多个容器，它正在替换整个视图而不是附加一个。事后看来，这是一个非常明显的错误。
所以主页上没有附加任何内容，因为我没有在索引上设置第二个 ui-view 将它放在那里，当我导航到 /library 时，模板的其余部分没有显示，因为我没有告诉它在那里。我真正想要的结构更像是这样的：
app.routes.js
export default function AppRoutes ($stateProvider)
$stateProvider
.state('home',
url: '/',
views:
'main':
template: require('./home/home.html'),
,
'sidebar':
template: `
<!-- this redirect will not refresh the whole page, just changes the sidebar -->
<button ui-sref="sidebar">Hello</button>
<ui-view/>
`,
,
)
.state('sidebar',
parent: 'home',
url: 'sidebar',
template: '<div>Hello</div>',
controller: function ()
)
// since both library and sidebar are children of home, sidebar shows up on the library descendent pages
.state('library',
parent: 'home',
abstract: true,
url: 'library',
views:
'main@':
template: '<ui-view/>'
)
.state('library.list',
url: '/list',
component: 'libraryList',
);
index.html 有两个ui-views，一个名为“main”，一个名为“library”，然后library.html 将拥有一个将插入列表的视图。
重定向似乎正在发生，因为我的路由配置设置为otherwise，而配置的某些内容无效，导致路由无效，因此将其重定向回根目录。
【讨论】：
以上是关于ui-router 不与父/子组件一起路由的主要内容，如果未能解决你的问题，请参考以下文章