Angular UI-Router与模板一起使用，但不适用于组件 [英] Angular UI-Router works with template but not component

问题描述

我正在尝试在angular 1项目上使用angular-ui-router.我遇到的问题是，在指定模板时可以使angular-ui-router正常工作，而在指定组件时则无法.

I am attempting to use angular-ui-router on an angular 1 project. The issue that I'm running into is that I can get angular-ui-router to work when I specify a template, but not when I specify a component.

例如，这有效:

var groceryListRoutes = function($stateProvider) {
    var listOfGroceryLists = {
        name: 'listOfGroceryLists',
        url: '/lists',
        template: '<grocery-list-component></grocery-list-component>',
    };
    $stateProvider.state(listOfGroceryLists);
};

但是，当我尝试指定组件时，什么都没有显示，并且控制台中没有错误:

However, when I attempt to specify the component, nothing shows up, and no error is given in the console:

var groceryListRoutes = function($stateProvider) {
    var listOfGroceryLists = {
        name: 'listOfGroceryLists',
        url: '/lists',
        component: 'groceryListComponent',
    };
    $stateProvider.state(listOfGroceryLists);
};

这是我的grocery-list.module.js，用于注册组件和溃败:

Here is my grocery-list.module.js, which register the component and the routs:

import angular from 'angular';
import 'angular-resource';
import uiRouter from 'angular-ui-router';

import groceryListComponent from './grocery-list.component';
import groceryListAPIService from './grocery-list.service';
import groceryListRoutes from './grocery-list.routes';

import groceryListDetailComponent from './grocery-list-detail.component';

const GroceryListModule = angular.module('groceryList', [
    // Dependencies
    'ngResource',
    'ui.router',
])
    .config(($resourceProvider) => {
        $resourceProvider.defaults.stripTrailingSlashes = false;
    })
    .factory('groceryListAPIService', groceryListAPIService)
    .component('groceryListComponent', groceryListComponent)
    .component('groceryListDetailComponent', groceryListDetailComponent)
    .config(groceryListRoutes);

export default GroceryListModule;

还有我的grocery-list.component.js:

import template from './grocery-list.template.html';

import groceryListController from './grocery-list.controller';

const groceryListComponent = {
    template,
    controller: groceryListController,
    controllerAs: 'groceryListCtrl',
}

export default groceryListComponent;

还有我的packages.json:

{
  "name": "shopping-list",
  "version": "1.0.0",
  "description": "An app to keep track of your grocery shopping",
  "repository": "https://github.com/thomascothran/shopping_list.git",
  "scripts": {
    "start": "gulp",
    "test": "echo \"Error: no test specified\" && exit 1",
    "eslint": "eslint"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.17.0",
    "babel-eslint": "^7.0.0",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.16.0",
    "eslint": "^3.7.1",
    "eslint-config-airbnb": "^12.0.0",
    "eslint-plugin-import": "^1.16.0",
    "eslint-plugin-jsx-a11y": "^2.2.2",
    "eslint-plugin-react": "^6.3.0",
    "gulp": "^3.9.1",
    "raw-loader": "^0.5.1",
    "webpack": "^1.13.2",
    "webpack-stream": "^3.2.0"
  },
  "dependencies": {
    "angular": "^1.5.8",
    "angular-resource": "^1.5.8",
    "angular-ui-router": "^0.3.1",
    "js-cookie": "^2.1.3",
    "ramda": "^0.22.1"
  }
}

推荐答案

请参阅以下问题: Angular-UI.Router未加载组件

看起来您正在根据package.json使用0.3.x，这将无法正常工作.升级到1.0.0，然后尝试.

Looks like you are using 0.3.x as per your package.json, which won't work. Upgrade to 1.0.0 and try please.

可以从ui-router@1.0.0获得

component属性(请参见此处并在 CHANGELOG.MD 中-它是在1.0.0-aplpha中添加的)，因此无法使用0.3.1

component attribute is available from ui-router@1.0.0(see here and in CHANGELOG.MD - it was added in 1.0.0-aplpha) so it's not available 0.3.1

这篇关于Angular UI-Router与模板一起使用，但不适用于组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！