如何在ui-router AngularJS中使用ui-sref

Question

我有文件index.html：

<!DOCTYPE html>
<html>
<head>
    <style>
        .navbar { border-radius:0; }
    </style>
    <link rel="stylesheet" type="text/css" href="lib/css/bootstrap.min.css">
    <script src="./node_modules/angular/angular.js"></script>
    <script src="./node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js"></script>
    <script src="./node_modules/angular-ui-router/release/angular-ui-router.js"></script>
    <script src="lib/js/app.js"></script>
</head>

<body ng-app="nav-module">
    <a ui-view="home" ui-sref="home" ui-sref-active="active">home</a>
    <a ui-view="about" ui-sref="about" ui-sref-active="active">about</a>
        <ui-view>
        </ui-view>

</body>
</html>

和文件app.js：

var app = angular.module("nav-module", ["ui.router",'ui.bootstrap']);
app.component('navComponent',{
    templateUrl: './navbar.component.html'
});
app.config(['$stateProvider',
'$urlRouterProvider',function($stateProvider,$urlRouterProvider) {
    $stateProvider
    .state('/home',{
        name: 'home page',
        url:'/home',
        template: '<h3>hello world!</h3>'
    })
    .state('/about',{
        url:'/about',
        component: 'navComponent'
    });
    $urlRouterProvider.otherwise('/home');
}]);

和nav-bar.component.html：

<h1>nav bar</h1>

但是我无法单击以标记以运行页面，并且当我在URL中更改/ about时，控制台显示错误：

无法加载模板：./navbar.component.html

我不知道为什么。

Answer 1

我认为您缺少templateurl位置或文件名，因为您提到templateUrl：'./ navbar.component.html'，但文件名是nav-bar.component.html。

首先删除templateUrl并使用组件中的模板： <h1>nav bar</h1>进行检查。
如果可以，则您的错误是仅缺少templateUrl引用或文件名。
然后使用../app/navtemplateurl.html修复此问题，文件名是navtemplateurl.html，位于应用程序文件夹中。

在模块中添加“ ui.bootstrap.tpls”也可以解决此问题

更新：将angularui路由器的引用从索引文件更改为<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-rc.1/angular-ui-router.js"></script> v0.4.2或更早版本不支持<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-rc.1/angular-ui-router.js"></script>作为ui-router中的组件模板。 您还需要更新它。

如何在ui-router AngularJS中使用ui-sref

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-10-18 06:27:29

如何在ui-router AngularJS中使用ui-sref

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-10-18 06:27:29

解决方案1
1 已采纳 2018-10-18 06:27:29