角度连接 2 控制器通过 1 具有 ES6 语法的服务

Angular connect 2 Controller through 1 Service with ES6 syntax

本文关键字：ES6 具有 语法 服务 连接 控制器      更新时间：2023-09-26

我已经开始在angular中使用ES6语法，我对它很满意。直到我尝试通过服务连接两个控制器。

问题不在于将服务注入控制器。这工作正常。我想解决的问题是，更改控制器 1 中的变量，这反过来又由控制器 2 触发的服务中变量的更改触发。

为了简化问题，我将像这样分解它：

带控制器的整个应用程序1

    <html lang="en-US" ng-app="app" ng-controller="PageController as pagectrl">
    <div ng-show="pagectrl.page_loading" class="containerLoading">
        <div class="icon">
            <i class="fa fa-spinner fa-pulse"></i>
        </div>
    </div>
    </html>

控制器 1：

    class PageController {
        constructor($scope, $state, GlobalLoading){
            this.$scope = $scope;
            this.$state = $state;
    //GlobalLoading is the service I injected
            this.globalLoading = GlobalLoading;
    //this.page_loading is the variable I want to update if GlobalLoading.page_loading changes
            this.page_loading = true;
            this.$scope.$watch(this.globalLoading.page_loading, this.pageLoadingChanged());
        }
        pageLoadingChanged(newValue,oldValue){
            console.log("pageLoadingChanged");
            return ()=>{
                console.log(newValue);
                this.page_loading = newValue;
            };
        }
    }
    export default PageController;

控制器 2：

 import RedditApi from 'src/common/services/reddit_api'
import ExtractGifsAndTitle from 'src/common/services/extract_gifs_and_title'
import ExtractPicsAndTitle from 'src/common/services/extract_pics_and_title'
import RedditModi from 'src/common/utils/reddit_modi' 

    class PostsController {
        constructor($scope, $state, GlobalLoading){
            this.$scope = $scope;
            this.$state = $state;
            this.globalLoading = GlobalLoading;
            this.getUrl();
        }
        getUrl(){
            //some stuff and then
            this.loadPosts(modi)
        }
        loadPosts(modi){
    //Here I set the value for page_loading in the service
            this.globalLoading.setPageLoading(true);
    //Some stuff happend
            this.loadGifs(url)
        }
        loadGifs(url){
// Now this part happens async through a promise
            RedditApi.load(url)
            .then(posts => ExtractGifsAndTitle.extract(posts))
            .then(posts => this.addPosts(posts));
        }
        addPosts(posts){
    // Again I change the value of page_loading in the service. This time back to false
            this.globalLoading.setPageLoading(false);
            this.posts = posts;
            this.$scope.$apply();
        }
    }
    export default PostsController;

服务内容：

    class GlobalLoading{
        constructor(){
            this.page_loading = false;
        }
        setPageLoading(set){
            this.page_loading = set;
        }
    }
    export default GlobalLoading;

我的问题是，角度不监视服务 GlobalLoad 中变量page_loading的变化。如果控制器 1 更改了服务 GlobalLoad 中的某些内容，我想更新与控制器 1 连接的 html。

我一直认为 angular 会自动监视通过服务注入的所有变量，显然它没有。

我将如何解决这个问题？如果有人能帮助我或为我指出正确的方向，我会很高兴。

已经非常感谢你了。

我解决了自己的问题

将页面控制器更改为：

class PageController {
        constructor($scope, $state, GlobalLoading){
            this.$scope = $scope;
            this.$state = $state;
    //GlobalLoading is the service I injected
            this.globalLoading = GlobalLoading;
    }
    export default PageController;

和我的 HTML 到：

    <html lang="en-US" ng-app="app" ng-controller="PageController as pagectrl">
    <div ng-show="pagectrl.globalLoading.page_loading" class="containerLoading">
        <div class="icon">
            <i class="fa fa-spinner fa-pulse"></i>
        </div>
    </div>
    </html>
相关文章：