Typescript服务在angularjs controller中多次订阅，无法退订

Question

Scenario: I need to merge angularjs with angular so currently I have started creating components and services and using them with angularjs controller.

Angularjs Controller is initiated from $routeProvider.

I have created a component of card view which shows card grid layout with images and have buttons to do approve/reject content of card view. Clicking on approve/reject button shows md-dialog pop-up to add message and other thing.

In typescript service I have created function to get and set data to show pop-up accordingly.

Clicking on component button calls typescript service which sets data and in angularjs controller I have subscribed to service get function.

Here are 2 issues I am facing:

1. Whenever page loads the service gets subscribed, so for eg: suppose I have opened that page 3 times, service get subscribed 3 times. So when I click on component button it shows md-dialog pop-up 3 times.

2. When I tried to unsubscribe the service on load and subscribe again, it never gets subscribed and pop-up doesn't shows up.

Here is code of typescript service:

import { BehaviorSubject, Observable } from 'rxjs';
import * as angular from 'angular';

class CardClickDTO {
    event;
    item;
    type: string;
}

let app = angular.module('PortalApp');
app.factory('contentcardSrv', [function (): {} {

    let cs = this;

    // Observable for Click Content
    cs._cardClickModel$ = new BehaviorSubject(new CardClickDTO());
    cs.CardClcikModel$ = cs._cardClickModel$.asObservable();

    // get data
    cs.getOnContentClickData = new Observable<CardClickDTO>(() => {
        return cs.CardClcikModel$;
    });

    // set data
    cs.setOnContentClick = (event, item, type: string): void => {
        let co: CardClickDTO = new CardClickDTO();
        if (type == "reset") // to reset Observable
            cs._cardClickModel$.next(co);
        else {
            co.event = event;
            co.item = item;
            co.type = type;
            cs._cardClickModel$.next(co);
        }
    };

    return {
        setOnContentClick: cs.setOnContentClick,
        getOnContentClickData: cs.getOnContentClickData,
    };
}]);

AngularJS Controller

import { portal } from '../portal';
import { saveAs } from 'file-saver';

portal.controller('controller', ['$scope', '$http', '$window', '$mdDialog', '$location', '$cookies', '$mdSidenav', '$mdToast', '$timeout', '$mdpTimePicker', '$interpolate', 'Map', '$sce', '$filter', 'menuSv', 'contentcardSrv', 'permissionSrv', '$anchorScroll', 
    function ($scope, $http, $window, $mdDialog, $location, $cookies, $mdSidenav, $mdToast, $timeout, $mdpTimePicker, $interpolate, Map, $sce, $filter, menuSv, contentcardSrv, permissionSrv, $anchorScroll) {

 // subscribed to get data function of service
 contentcardSrv.getOnContentClickData().subscribe((co) => {
            if (co != undefined && co.event != undefined && co.item != null && co.item != undefined && co.type != "" && co.type != undefined) {
                $scope.onContentClick(co.event, co.item, co.type);
                co.event.stopPropagation();
            }
        });

 $scope.onContentClick = function (ev, item, type) {
     // show md-dialog pop-up.
     };
}]);

contentcard.component.ts

//import angular from 'angular';
import { portal } from 'js/portal';

portal.component('contentcardComponent', {
    templateUrl: './contentcard.component.html',
    controllerAs: 'ctrl',
    controller: 'contentcardComponentController',
    bindings: {
        itemsdata: '@',
        viewdata: '@'
    }
});

portal.controller('contentcardComponentController', ['contentcardSrv',
    function (contentcardSrv): void {

        const ctrl = this;

        // component click function
        ctrl.onContentClick = function (ev, item, type: string): void {
            if (type == "Approved" || type == "Rejected" || type == "Partial" || type == "ApproveMessage")
                ctrl.btnClicked = true;
            contentcardSrv.setOnContentClick(ev, item, type); // set data service function
        };
    }]);

Answer 1

Solved the problem by using $destroy event of angularjs.

In AngularJS Controller

let onContentClickSubscription = contentcardSrv.getOnContentClickData().subscribe((co) => {
        if (co != undefined && co.event != undefined && co.item != null && co.item != undefined && co.type != "" && co.type != undefined) {
            $scope.onContentClick(co.event, co.item, co.type);
            co.event.stopPropagation();
        }
    });

$scope.$on('$destroy', function iVeBeenDismissed() {
            // say goodbye to your controller here
            // release resources, cancel request...
            onContentClickSubscription.unsubscribe();
        })