Получить определяющий элемент из ссылки href [duplicate]

У меня была аналогичная ситуация при использовании обратного вызова «eventClick» библиотеки fullCalendar , чьи обратные вызовы возвращаются из-за пределов угловой зоны, в результате чего мое приложение имеет частичные и ненадежные эффекты. Мне удалось объединить зонный подход и ссылку на замыкание на компонент, как показано ниже, чтобы поднять выходное событие. Как только я начал выполнять событие внутри метода zone.run (), событие и его эффекты снова были предсказуемы и подхвачены обнаружением угловых изменений. Надеюсь, это поможет кому-то.

constructor(public zone: NgZone) { // code removed for clarity
}

ngOnInit() {
    this.configureCalendar();
}

private configureCalendar() {
    // FullCalendar settings
    this.uiConfig = {
        calendar: { // code removed for clarity

        }
    };

    this.uiConfig.calendar.eventClick = this.onEventClick();

}

private onEventClick() {
    const vm = this;

    return function (event, element, view) {
        vm.zone.run(() => {
            vm.onSequenceSelected.emit(event.sequenceSource);                    
        });

        return false;

    };
}

Я в основном выполнил этот ответ , но я не хотел, чтобы мой «внешний» код знал что-нибудь о NgZone. Это app.component.ts:

import {Component, NgZone, OnInit, OnDestroy} from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: 'app.component.html'
})
export class AppComponent implements OnInit, OnDestroy {
  constructor(private ngZone: NgZone) {}

  ngOnInit() {
    window.my = window.my || {};
    window.my.namespace = window.my.namespace || {};
    window.my.namespace.publicFunc = this.publicFunc.bind(this);
  }

  ngOnDestroy() {
    window.my.namespace.publicFunc = null;
  }

  publicFunc() {
    this.ngZone.run(() => this.privateFunc());
  }

  privateFunc() {
    // do private stuff
  }
}

Мне также пришлось добавить определение для TypeScript для расширения объекта окна. Я положил это в typings.d.ts:

interface Window { my: any; }

Вызов функции с консоли теперь прост как:

my.namespace.publicFunc()

Просто добавив к @Dave Kennedy :

Вызов функции с консоли теперь прост как:

my.namespace.publicFunc()

1) Если мы попытаемся получить доступ к общедоступному методу нашего компонента из другого домена, вы попадете в проблему CORS (проблема с перекрестным происхождением может быть решена, если оба кода сервера и клиента находятся в одном и том же машина).

2) если вы должны были вызвать этот метод с сервера с помощью javascript, вам нужно будет использовать window.opener.my.namespace.publicFunc() вместо window.my.namespace.publicFunc():

window.opener.my.namespace.publicFunc();

Другой подход, не использующий глобальные переменные, состоит в том, чтобы использовать передающий объект управления и связывать его свойства с переменными и методами, которые должны быть показаны.

export class MyComponentToControlFromOutside implements OnChanges {

  @Input() // object to bind to internal methods
  control: {
    openDialog,
    closeDialog
  };

  ngOnChanges() {
    if (this.control) {
      // bind control methods to internal methods
      this.control.openDialog = this.internalOpenDialog.bind(this);
      this.control.closeDialog = this.internalCloseDialog;
    }
  }

  internalOpenDialog(): Observable<boolean> {
    // ...
  }

  internalCloseDialog(result: boolean) {
    // ...
  }
}

export class MyHostComponent {
   controlObject= {};
}

<my-component-to-control [control]="controlObject"></my-component-to-control>

<a (click)="controlObject.open()">Call open method</a>

Ниже приведено решение.

function callbackfunction(){   
   window.angularComponent.runThisFunctionFromOutside();
}
       <script>
          System.config({
            transpiler: 'typescript', 
            typescriptOptions: { emitDecoratorMetadata: true }, 
            packages: {'js/app': {defaultExtension: 'ts'}} 
          });
          System.import('js/app/main')
                .then(null, console.error.bind(console));
        </script>

My App.component.ts

import {Component NgZone} from 'angular2/core';
import {GameButtonsComponent} from './buttons/game-buttons.component';
@Component({
    selector: 'my-app',
       template: ' blblb'
})
export class AppComponent {

  constructor(private _ngZone: NgZone){
  window.angularComponent = {runThisFunctionFromOutside: this.runThisFunctionFromOutside, zone: _ngZone};
}


    runThisFunctionFromOutside(){
      console.log("run");
    }
}