Как объявить сингелтон в машинописи - PullRequest
Новая
       30

Как объявить сингелтон в машинописи

0 голосов
/ 20 сентября 2018

Я хотел бы интегрировать существующую библиотеку в мой проект машинописного текста.Существует (внешний) одноэлементный объект, который я хочу объявить и использовать.

Пример: в xyz.js будет объявлен следующий объект: 

var mxUtils = {
    /* some fancy code */
    findNode: function(node, attr, value)
    {
        // even more fancy code
        return node;
    }
};

Во время выполнения существуетодин глобальный экземпляр mxUtils.Поскольку это внешняя библиотека, я не хочу реализовывать или переписывать всю библиотеку в машинописном тексте.

Теперь я попытался объявить этот синглтон, но потерпел неудачу.

Я попробовал этот код, чтобы объявить объект как глобальную переменную.

Utils.d.ts: 

declare interface ImxUtils { 
    findNode(node:any, attr:string, value:string):any;
}

declare var mxUtils: ImxUtils;

Мой компилятор полностью удовлетворен этим, но во времявремя выполнения mxUtils не определено

main.ts: 

// some fancy things
export class fancyComponent implements OnInit {
    // some magic here...
    var tmpNode = mxUtils.findNode(aNode, aString1, aString2);    
}

Даже если мой отладчик перечисляет глобальный объект mxUtils.

Может ли кто-нибудь помочь мне в этом?

Пожалуйста, отметьте: * xyz.js уже указан и присутствует.например,

xyz.js 

function mxEventObject(name)
{
//
}

mxEventObject.prototype.getName = function()
{
    return this.name;
};

Utils.d.ts 

declare class mxEventObject {
    constructor(name: string);
    getName: () => string;
}

main.ts 

export class fancyComponent implements OnInit {
    // some magic here...
    var tmpEvent = new mxEventObject(aSampleString);

}

будет работать должным образом.

Поскольку существует глобальный объект с именем mxUtils, но я не могу получить доступ к этому объекту в моем экспорте fancyComponent, я предполагаю, что существует проблема с областью действия.

1 Ответ

0 голосов
/ 20 сентября 2018

Чтобы лучше обрабатывать в DI (Dependency Injection) систему для создания объектов и внедрения этих объектов в компонент, вам необходимо создать угловой сервис и добавить этот сервис в список поставщиков в AppModule для компонента-декоратора.

mx-utils.service.ts 

export class MxUtilsService {

  /* some fancy code */
  public findNode(node:any, attr:any, value:any) {
    // even more fancy code
    return node;
  }
}

app.module.ts 

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ],
  providers: [MxUtilsService]
})
export class AppModule { }

app.compoennet.ts 

import { Component } from '@angular/core';
import { MxUtilsService } from './mx-utils.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(private _mxUtilsService: MxUtilsService) {
    console.log(this._mxUtilsService);
    console.log(this._mxUtilsService.findNode({node:1},'node',1));
  }
}

любой сервис, добавляемый в список провайдеров в appModule (root), считается одноэлементным, MxUtilsService создает их и будет тем же объектом, когда вы добавляете его в другие компоненты

демонстрация stackblitz

Почему ваш объект не определен, вам нужно добавить xyz.js в список скриптов в .angular-cli.json

...