无法使角元件与componentRouter一起工作
无法使角元件与componentRouter一起工作
提问于 2016-05-05 15:18:59
我正在尝试制造一个样板来使用角度1.5.x和组件，但是(目前)不可能让组件工作。
这是我的文件夹结构：
rootfolder
.....
index.html
static/
app/
components/
app/
appBase.js
hello/
hello.js
app.js
routes.js
services.js所以这个想法很简单:把组件拆开，里面有路线。我用的是约翰·爸爸风格的指南和托德的座右铭。
以下是我的模块：
app.js (主模块)
(function() {
'use strict'
angular
.module('app', ['ngComponentRouter', 'app', 'app.hello'])
})();routes.js (配置文件)
(function(){
'use strict';
angular
.module('app')
.config(config)
.value('$routerRootComponent', 'app');
config.$inject = ['$locationProvider'];
function config($locationProvider){
$locationProvider.html5Mode(true);
};
})();组件:分隔文件夹中的appBase.js / hello.js。
(function() {
'use strict';
var app = {
template: `
<hello></hello>
<ng-outlet></ng-outlet>
`,
$routeConfig: [
{ path: '/', name: 'app', component: 'hello' }
]
};
angular
.module('app', [])
.component('app', app);
})();
(function() {
'use strict';
var hello = {
template: `<h1>Hello World</h1>`
};
angular
.module('app.hello', [])
.component('hello', hello);
})();The index.html
<!DOCTYPE html>
<html ng-app="app" lang="en">
<head>
<base href="/">
<meta charset="UTF-8">
<title>Components example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<app></app>
<script src="static/assets/bower/bower_components/angular/angular.js"></script>
<script src="static/assets/bower/bower_components/angular-component-router/angular_1_router.js"></script>
<script src="static/assets/js/dist/angular-app.min.js"></script>
</body>
</html>我在控制台中没有错误，应用程序模块正在执行以下工作：
<app>
<hello></hello>
<ng-outlet></ng-outlet>
</app>但是hello组件不起作用.知道吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-05-05 15:53:35
我不知道为什么您没有收到任何控制台错误，但我认为您在这里重写了您自己的模块定义。
尝试：
(function() {
'use strict'
angular
.module('app', ['ngComponentRouter', 'app.hello'])
.module('app.hello', [])
})();和
angular
.module('app')
.component('app', app);和
angular
.module('app.hello')
.component('hello', hello);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37054285
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号