Komponente Funktion als Ajax Callback

Question

Ich habe eine Menükomponente, die Ajax-Aufruf für dynamisches HTML-Rendering verwenden, so dass der Browser nicht aktualisiert wird, wenn der Benutzer auf einen der Menüelemente klickt. Wir verwenden jQuery-ajax-unauffällig, um den Ajax-Aufruf durchzuführen. Dieser Teil funktioniert gut.

<div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <!-- Some HTML ... --> 
     </div> 
     <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
       <li> 
        <a href="/Home/Contact" 
         data-ajax="true" 
         data-ajax-method="GET" 
         data-ajax-mode="replace" 
         data-ajax-success="setUrl" 
         data-ajax-failure="redirectToLogin" 
         data-ajax-update="#renderbody">Contact</a> 
       </li> 
      </ul> 
     </div> 
    </div> 
</div> 

Und ich Ajax Rückruf ähnliche

data-ajax-success="setUrl" 
data-ajax-failure="redirectToLogin" 

ich mich gefragt, ob diese Rückrufe können in Maschinenschrift geschrieben in Angular2' Komponentenfunktionen eingekapselt werden? Im Moment habe ich einen Javascript-Fehler, der besagt, dass die Methoden 'setUrl' und 'redirectToLogin' nicht gefunden werden können.

Answer 1

Hier ist eine Beispielimplementierung dieser innerhalb einer benutzerdefinierten Angular2 Richtlinie:

@Directive({ 
    selector: '[data-ajax]', 
    host: { 
    '(click)': 'onClick($event)' 
    } 
}) 
export class DataAjaxDirective { 
    @Input('href') 
    url:string; 
    @Input('data-ajax') 
    enabled:boolean; 
    @Input('dataAjaxMethod') 
    method:string; 
    @Input('dataAjaxMode') 
    mode:string; 
    @Output('data-ajax-success') 
    success:EventEmitter<any> = new EventEmitter(); 
    @Output('data-ajax-failure') 
    failure:EventEmitter<any> = new EventEmitter(); 

    constructor(private http:Http) { 
    } 

    onClick(event) { 
    event.preventDefault(); 
    event.stopPropagation(); 

    this.http[this.method.toLowerCase()](this.url).map(res => res.json()).subscribe(
     (data) => { 
     this.success.emit(data); 
     }, 
     (err) => { 
     this.failure.emit(err); 
     } 
    ); 
    } 
} 

Und die Art und Weise, es zu benutzen:

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <a href="https://mapapi.apispark.net/v1/maps/" 
        data-ajax="true" 
        dataAjaxMethod="GET" 
        dataAjaxMode="replace" 
        (data-ajax-success)="onDataReceived($event)" 
        (data-ajax-failure)="redirectToLogin()" 
        data-ajax-update="#renderbody">Contact</a> 

     <ul> 
     <li *ngFor="#map of maps">{{map.name}}</li> 
     </ul> 
    </div> 
    `, 
    directives: [ DataAjaxDirective ] 
}) 
export class AppComponent { 
    onDataReceived(data) { 
    this.maps = data; 
    } 
} 

Sehen Sie diese plunkr: https://plnkr.co/edit/Csw9bq7Ufa3bGXkqpSyN?p=preview.

Answer 2

JQuery benötigt globale setUrl Funktion: window.setUrl = function(){};, die nicht Weg ist zu gehen.

Sie könnten Ihre eigene Implementierung von jquery.unobtrusive-ajax.js mit benutzerdefinierten Directive schreiben.