one-time occurrence of $mdToast injection within a parent class

Question

one-time occurrence of $mdToast injection within a parent class

Seeking advice on how to efficiently place a single instance of $mdToast (from Angular Material) into a base class (Typescript). In my UI, I have five tabs with separate controller instances and it seemed logical to centralize the $mdToast declaration in a base class rather than repeating it. However, despite having its own "$inject" property, it seems to be overridden by the one in the derived class. Any suggestions on the best approach for moving $mdToast to a common base class? Here is a snippet of my current code:

Note that the original $mdToast lines are currently commented out:

export class MainController extends BaseController {
static $inject = [
  'tableService',
  '$mdSidenav', 
  //'$mdToast', 
  '$mdDialog', 
  '$mdMedia',
  '$mdBottomSheet'];

constructor(
  private tableService: ITableService,
  private $mdSidenav: angular.material.ISidenavService,
  //private $mdToast: angular.material.IToastService,
  private $mdDialog: angular.material.IDialogService,
  private $mdMedia: angular.material.IMedia,
  private $mdBottomSheet: angular.material.IBottomSheetService) {
  super();
  var self = this;
}}

The following is the base class. Take note of the injection of $mdToast and the declaration of $mdToast outside of the constructor:

export class BaseController {
static $inject = [
  '$mdToast'];

constructor() {
  var self = this;
}

private $mdToast: angular.material.IToastService;

openToast(message: string): void {
  this.$mdToast.show(
    this.$mdToast.simple()
      .textContent(message)
      .position('top right')
      .hideDelay(3000)
  );
}}

I tried using $injector as suggested elsewhere on SO, but it didn't work for me. Appreciate any helpful responses!

angularjs typescript angular-material

Answer 1

Answer №1

There is a common pattern in the code snippet provided:

export class BaseController {
    static $inject = [...];
    ...
}

export class MainController extends BaseController {
    static $inject = [...BaseController.$inject,
      ...
    ];

    constructor(...deps) {
        const superDeps = BaseController.$inject.map((dep, i) => deps[i]);

        super(...superDeps);

        const thisDeps = deps.slice(superDeps.length);
        const thisDepNames = this.constructor.$inject.slice(superDeps.length);
        ...


    }

    ...
}

This pattern can be encapsulated in a base class or decorator for ease of use if it is repeated frequently. It essentially involves parsing two arrays, $inject and deps, to assign dependencies to this.

However, it's worth noting that this method is not type-safe.

In TypeScript, it's recommended to keep things DRY while maintaining type safety. For consistency, we should prioritize listing the dependencies of the parent class first:

export class BaseController {
    static $inject = ['$mdToast'];

    constructor(protected $mdToast: angular.material.IToastService) { ... }
}

export class MainController extends BaseController {
    static $inject = [
      '$mdToast'

      'tableService',
      ...  
    ];

    constructor(
        $mdToast: angular.material.IToastService,

        private tableService: ITableService,
        ...
    ) {
        super($mdToast);
    }}
    ...
}

Answer 2

There is a common pattern in the code snippet provided:

export class BaseController {
    static $inject = [...];
    ...
}

export class MainController extends BaseController {
    static $inject = [...BaseController.$inject,
      ...
    ];

    constructor(...deps) {
        const superDeps = BaseController.$inject.map((dep, i) => deps[i]);

        super(...superDeps);

        const thisDeps = deps.slice(superDeps.length);
        const thisDepNames = this.constructor.$inject.slice(superDeps.length);
        ...


    }

    ...
}

This pattern can be encapsulated in a base class or decorator for ease of use if it is repeated frequently. It essentially involves parsing two arrays, $inject and deps, to assign dependencies to this.

However, it's worth noting that this method is not type-safe.

In TypeScript, it's recommended to keep things DRY while maintaining type safety. For consistency, we should prioritize listing the dependencies of the parent class first:

export class BaseController {
    static $inject = ['$mdToast'];

    constructor(protected $mdToast: angular.material.IToastService) { ... }
}

export class MainController extends BaseController {
    static $inject = [
      '$mdToast'

      'tableService',
      ...  
    ];

    constructor(
        $mdToast: angular.material.IToastService,

        private tableService: ITableService,
        ...
    ) {
        super($mdToast);
    }}
    ...
}

Answer 3

Answer №2

Although considered a bit of a hack, this method will effectively complete the task in a straightforward manner. Utilize ES6's import/export statements to ensure that this service is accessible wherever it is needed.

export let $injector;

class injectorConfig {
    static $inject = ['$injector'];
    constructor (private $originalInjector) {
        $injector = $originalInjector;
    }
}

app.config(injectorConfig);

Your BaseController.ts file should resemble the following structure:

import {$injector} from '../yourfilename';

export class BaseController {
    private $mdToast = $injector.get('$mdToast');
    constructor( ) {
        var self = this;
    }
}

It is important to note that just because this method works does not mean it should be heavily relied upon. However, in certain scenarios like these, this technique can be fairly reasonable. Keep in mind that the $injector will not be accessible until Angular executes this config block, therefore it cannot be used in providers or any other code that executes prior to the config block.

Answer 4

Although considered a bit of a hack, this method will effectively complete the task in a straightforward manner. Utilize ES6's import/export statements to ensure that this service is accessible wherever it is needed.

export let $injector;

class injectorConfig {
    static $inject = ['$injector'];
    constructor (private $originalInjector) {
        $injector = $originalInjector;
    }
}

app.config(injectorConfig);

Your BaseController.ts file should resemble the following structure:

import {$injector} from '../yourfilename';

export class BaseController {
    private $mdToast = $injector.get('$mdToast');
    constructor( ) {
        var self = this;
    }
}

It is important to note that just because this method works does not mean it should be heavily relied upon. However, in certain scenarios like these, this technique can be fairly reasonable. Keep in mind that the $injector will not be accessible until Angular executes this config block, therefore it cannot be used in providers or any other code that executes prior to the config block.

one-time occurrence of $mdToast injection within a parent class

Answer №1

Answer №2

Similar questions

The art of transforming properties into boolean values (in-depth)

How can you establish the default value for a form from an Observable?

Typescript's spellbinding courses

Issue in TypeScript: Property '0' is not found in the type

Create an Angular-UI function that appends a modal inside a <div> element with the class

Utilizing the 'as' prop for polymorphism in styled-components with TypeScript

Unable to retrieve the updated array value in NodeJs when accessed outside the function scope

Is AngularJS primarily a client-side or server-side framework, or does it have elements

AngularJS retrieves empty array from OData request

utilizing protractor for end-to-end testing: utilizing Promises in utility functions

Looking for a shortcut in VSCode to quickly insert imports into existing import statements or easily add imports as needed on the go?

Vue: rendering props cannot be utilized with TSX

Encountering a problem with AngularJS when trying to pass a controller through ng-include in HTML

What is the best way to send data to a different screen in Ionic 1 and Angular 1?

Looking to have two separate modules on a single page in AngularJS, each with its own unique view

Is there a way to set a default value for an Angular service provider?

javascript identify dissimilarities within arrays

Pausing in a NodeJS HTTP request listener until receiving another response before proceeding

Is it possible to retrieve a union type property as an array of values in order to conduct a flexible type validation process?

Utilize the key-value pair from ng-repeat to expand the scope of the expression