如何通过 $routeProvider link 两个 Angular 组件

Question

我对 Angular 个组件有一些问题：

示例： myApp.js

angular.module('myApp', [])
.config(function($routeProvider) {
    $routeProvider
        .when('/login', {
            template: '<login></login>'
        })
        .when('/users', {
            template: '<users></users>'
        })
        .otherwise({redirectTo: '/login'});
});

在我的项目中，我有 "main" 个包含 ng-view 的组件。

main.js

angular.module('remoteGuiApp')
.component('main', {
    controller: function ($location, $window, $http) {
        //some code here
        //...
    },
    templateUrl: 'main.html'
});

main.html

<nav class="navbar navbar-default">
  <!-- ome navigation code-->
</nav>
<div ng-view>
</div>

我还有 "login" 组件 login.js

angular.module('remoteGuiApp')
.component('login', {
    controller: function () {
        //some code here
        //...
    },
    templateUrl: 'login.html'
});

所以我需要以某种方式将事件从 "login" 组件连接到 "main" 组件。从技术上讲，"login" 嵌套于 "main"，但它不是直接嵌套，而是来自 $routeProvider。也许有人知道该怎么做？谢谢你的帮助。

Answer 1

您可以使用 $rootScope.$emit。当然要注入，然后像这样，在child:

$rootScope.$emit('rootScope:authenticated', userData);

在parent中：

$rootScope.$on('rootScope:authenticated', function (event, userData) {
    alert(JSON.stringify(userData));
  })

如何通过 $routeProvider link 两个 Angular 组件

How to link two Angular components through $routeProvider

angularjs

ngroute

angularjs-ng-route