Call jQuery-Funktion von Controller Angular4

Question

Ich versuche, eine jquery Funktion meins von einem Angular 4-Controller, wenn eine asynchrone Funktion abgeschlossen sein, aber ich kann nicht finden, wie.

Mein Controller:

import { Component, OnInit, ViewEncapsulation } from '@angular/core'; 
import { MyService } from '../my.service'; 

declare var $: any; 

@Component({ 
    selector: 'slider', 
    encapsulation: ViewEncapsulation.None, 
    templateUrl: './slider.component.html', 
    styleUrls: ['./slider.component.css'] 
}) 
export class SliderComponent implements OnInit { 

    banners: Promise<String[]>; 

    ngOnInit(): void { 
    this.banners.then(function(result) { 
      // HERE MUST BE MY CODE FUNCTION 
    }); 
    } 

    constructor(private myService: MyService) { 
     this.banners = this.myService.getBanners(); 

    } 
} 

Und meine Vorlage:

<div id="slider1_container" style="position: relative; margin: 0 auto; width:600px; height:300px; left:0px; top:0px;"> 

     <!-- Slides Container --> 
     <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 300px; 
      overflow: hidden;"> 
      <div *ngFor="let b of banners | async"> 
       <img u="image" src="{{ b }}" /> 
      </div> 
     </div> 

     <!-- Trigger --> 
     <div class="slideshow-block"> 

      <div style="margin: 0 4px; display: none; "> 
       <input id="stTransitionName" readonly type="text" style="width:200px;height:22px;" /> 
      </div> 
      <div style="display: none; margin: 0 4px;"> 
       <input id="stTransition" readonly type="text" style="width:100%;height:22px;" /> 
      </div> 

      </div> 
    </div> 

Wenn alle meine Banner geladen werden Ich brauche eine Jquery-Funktion aufrufen, die Bewegung wirksam werden zu lassen. Vorher, mit nur HTML und jquery habe ich die Funktion auf der window.ready Funktion aufgerufen, aber jetzt ist das nutzlos, weil es eine asynchrone Funktion ist.

Danke.

Answer 1

///<reference path="../typings/jquery/jquery.d.ts" /> 
 

 
import {Component, AfterViewInit} from 'angular2/core'; 
 

 
@Component({ 
 
    selector: 'your-app', 
 
    templateUrl: './app.component.html' 
 
}) 
 

 
export class AppComponent implements AfterViewInit { 
 
    ngAfterViewInit() { 
 
    // Your jQuery code goes here 
 
    $('#yourElement').text("Hello! ^_^"); 
 
    } 
 
}