簡體   English   中英

AngularJS-TypeError:無法讀取未定義的屬性“ canonicalUrl”

[英]AngularJS - TypeError: Cannot read property 'canonicalUrl' of undefined

我正在使用ES6在AngularJS中開發一個應用程序,但我正在嘗試以適合AngularJS 2.0的方式進行操作,因此我正在使用“ Angular新路由器”

Application.js:application是指令,它作為屬性放置在<html>標記中

class Application {

    constructor($router) {
        this.$router = $router;
        this.routing();
    }

    routing(){
        this.$router.config(
            {
                path: '/',
                component: 'main'
                //component: {'main': 'main'} // view-name:component => name.html, NameController
            },
            {
                path: '/doctors',
                component: 'doctors'
            }
        );
    }

}

Application.$inject = ['$router'];

export default function() {
    return {
        scope: {},
        controller: Application,
        controllerAs: 'applicationCtrl'
    };
};

Dashboard.js:

import doctorsCtrl from "../../page/dashboard/DoctorsCtrl.js"; // controller for the component
import mainCtrl from "../../page/dashboard/MainCtrl.js";
import doctors from "./widget/doctors/Doctors.js";


angular.module('agenda.dashboard', ['ngNewRouter'])

    .directive("application", application)
    .directive("doctors", doctors)

    .config(function ($componentLoaderProvider) {
        $componentLoaderProvider.setTemplateMapping(function (name) {
            return 'page/dashboard/' + dotCase(name) + '.html';
        });

        $componentLoaderProvider.setCtrlNameMapping(function (name) {
            return name[0].toUpperCase() + name.substr(1) + 'Ctrl';
        });
    })

    .controller('MainCtrl', mainCtrl)
    .controller('DoctorsCtrl', doctorsCtrl);


    function dotCase(str) {
    return str.replace(/([A-Z])/g, function ($1) {
        return '.' + $1.toLowerCase();
    });
}

Main('/')正常工作,但是當我嘗試打開('/ doctors')時出現錯誤

TypeError:無法讀取未定義的屬性“ canonicalUrl”

 at Grammar.recognize (router.es5.js:1453) at RootRouter.recognize (router.es5.js:752) at RootRouter.navigate (router.es5.js:680) at RootRouter.$$rootRouter.navigate (router.es5.js:94) at Object.fn (router.es5.js:89) at Scope.$get.Scope.$digest (angular.js:15556) at Scope.$get.Scope.$apply (angular.js:15824) at bootstrapApply (angular.js:1628) at Object.invoke (angular.js:4426) at doBootstrap (angular.js:1626) 

我剛剛發現,傳遞給.config()的應該是數組。

因此,當我將其更改為:

routing(){
        this.$router.config(
         [ // NOTE THIS
            {
                path: '/',
                component: 'main'
                //component: {'main': 'main'} // view-name:component => name.html, NameController
            },
            {
                path: '/doctors',
                component: 'doctors'
            }
         ] // NOTE THIS

        );
    }

它運作完美。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM