Eckige 2-Ereignis, wenn alle [routerLink] geklickt wird

Habe ich eine einfache Loader-Service, verbirgt und zeigt gewisse Lader. Ich arbeite an etwas, das eine Menge, bei langsamen verbindungen, und ich brauche zum ein - /ausblenden ein-loader zwischen route ändert.

Kann ich ausblenden, der Lader, wenn die neue route geladen wird, mit den folgenden.

this._Router.subscribe(() => {
    this._LoaderService.hide();
})

Ich versuche einen Weg zu finden, dass ich anrufen kann meine this._LoaderService.show() Funktion sofort, wenn irgendwelche [routerLink] geklickt wird (am Anfang der route ändern, nicht das Ende).

Hatte, habe ich einen Blick um und ich versuchte https://angular.io/docs/ts/latest/api/router/Router-class.html aber ich kann nicht scheinen, um es herauszufinden.

Jede Hilfe dankbar

InformationsquelleAutor Oliver Millington | 2016-03-25
  1. 10

    Könnte man erstellen Sie Ihre eigenen routerLink Richtlinie durch die Verlängerung der Standard-ein https://github.com/angular/angular/blob/master/packages/router/src/directives/router_link.ts und überschreiben Sie die onClick()

    Ähnlich micronyks Antwort

     <a  [routeLink]=['User'] (click)="loaderService.show()">User</a>

    sollte auch funktionieren, aber Sie Hinzugefügt haben, um den click-handler everywhwere.

    InformationsquelleAutor Günter Zöchbauer
  2. 15

    Mit so viel Informationen ist es nicht möglich zu sagen, Sie richtige Weg ist, beachten Sie bitte auch, dass diese loader-service-Implementierung variiert je nach router-Implementierung.

    Entweder haben Sie zu verlängern route-outlet Klasse und sollte in der Lage loaderService es ODER Sie haben zu handhaben link klicken, indem Sie Ihre eigenen wie,

    <a  [routeLink]=['User']>User</a>

    chage es,

    <a (click)="changeRoute('User')">User</a>

    dann,

    import { Router } from '@angular/router';

constructor(private router: Router){}

changeRoute(routeValue) {
   this._LoaderService.show(); 
   //this will start the loader service.

   this.router.navigate([routeValue]); 
   //you have to check this out by passing required route value.
   //this line will redirect you to your destination. By reaching to destination you can close your loader service.
   //please note this implementation may vary according to your routing code.

}

    Wird, und wenn eine bestimmte route/link/Komponente aktiv ist, werden innerhalb dieser Komponente können Sie schließen Sie Ihre loader-service, Wann immer und wo immer Sie wollen.

    • vielen Dank für die Korrektur !
    • aber was ist dann mit routerLinkActive ?
    InformationsquelleAutor micronyks
  3. 2

    Hatte ich ganz ähnlich müssen bei der Einbindung von bootstrap navbar in Angular2 app.

    Die Lösung kam ich verbindlich sei eine Boolesche variable zur Steuerung der toggle-Status der navbar (äquivalent zu verbergen, und zeigen Sie auf Ihrem Fall).

    Sobald der Benutzer klickt auf das hamburger-Symbol oder die ungeordnete Liste der routerLinks, die variable wurde entsprechend eingestellt. Hinweis: ich Binde das click-Ereignis der Elternteil, der Anker, die die eigentliche routing in Eckig.

    Sieht mehr bequem dann ist die Verlängerung der routerLink Richtlinie.

    <nav class="navbar navbar-default navbar-custom {{isfixed}} {{istransparent}}" *ngIf="showNav" aria-expanded="false">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header page-scroll">
                <button  (click)="isCollapsed = !isCollapsed" type="button" class="navbar-toggle collapsed">
                    <span class="sr-only">Toggle navigation</span>
                    <i class="fa fa-bars"></i>
                </button>
                <a routerLink="/home" routerLinkActive="active" class="navbar-brand">
                    <span><img src="assets/icon/android-icon-36x36.png"></span>
                    {{brandText}}
                </a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"
            [attr.aria-expanded]="!isCollapsed" [ngClass]="{collapse: isCollapsed}">
                <ul class="nav navbar-nav navbar-right" (click)="isCollapsed = !isCollapsed">
                    <li>
                        <a routerLink="/home" routerLinkActive="active">Home</a>
                    </li>
                    <li>
                        <a routerLink="/about" routerLinkActive="active">About</a>
                    </li>
                    <li>
                        <a routerLink="/posts" routerLinkActive="active">Posts</a>
                    </li>
                    <li>
                        <a routerLink="/contact" routerLinkActive="active">Contact</a>
                    </li>
                </ul>
            </div> <!-- /.navbar-collapse -->
        </div> <!-- /.container -->
</nav> <!-- NAV -->
    InformationsquelleAutor Yamada
Schreibe einen Kommentar