Deaktivieren Sie einen link in eckige 2+

Ich bin versucht zu deaktivieren Sie einen link, bis ein API-Aufruf in Eckige 6. Ich will den link deaktiviert werden, bis die getSelectedDealer () - API zurückgegeben wird. 

 <menu-link *ngIf="perms.has(perms.TOP_OFFERS) && _dealerPersistenceService.getSelectedDealer()"
           route="/dynamic-journeys/{{getDealerId()}}/vehicles">
    <menu-item><img src="/assets/menu-icons/top-offers.svg">Dynamic Journeys</menu-item>
</menu-link>

Hier ist der code für 'a' - tag-Komponente und die CSS.

<a [routerLink]="route" routerLinkActive="active" class="menu-link" [class.disabled]="disabled ? true: null">
<ng-content select="menu-item"></ng-content>

a.disabled {
    pointer-events: none;
    cursor: default;
}

Im Prinzip brauche ich den "menu-link" - Elemente deaktiviert werden, die vor API-Aufruf und aktiviert werden, nach.

  • <a [routerLink]="route" routerLinkActive="active" class="menu-link" [disabled]="apiReturned ? true : false " >. Mit apiReturned als Komponente Eigenschaft??
  • Setzen Sie einfach die disabled Flagge zu true standardmäßig. Und es zurücksetzen, um den Wert, den Sie wollen bei der Rückgabe des API nennen.
  • Deaktiviert die Eigenschaft existiert nicht auf 'a' - tag standardmäßig. Setze ich den toggle-flag für Behinderte auf die zugrunde liegenden 'a' - tag oder in der Menü-link?
  • Sorry, wusste nicht, es war ein Anker, obwohl ich habe eine Antwort, warum dein Ansatz nicht funktioniert??
  • Im Grunde bin ich nur versucht habe den link deaktiviert, bis der _dealerPersistenceService.getSelectedDealer() zurückgegeben wird. Diese Methode ist in den Menü-link-Komponente und nicht in der zugrunde liegenden 'a' - tag. Kann ich überprüfen, ob diese Methode aufgerufen wurde, und kehrte in der zugrunde liegenden 'a' - Tags oder lege ich es in den Menü-link?
  • Die Komponente, in der Sie Ihre anchor - tag befindet, können sagen anchorTag Komponente, es anchorTag Komponente eine untergeordnete Komponente von menu-link Komponente?
  • Wie Sie sehen können, die 'a' - tag mit der Klasse "menu-link', die den 'a' - tag. Die "menu-link" versteckt ist, es sei denn, die '_dealerPersistenceService.getSelectedDealer ()' - Methode zurückgegeben wurde. Anstatt uns zu verstecken "menu-link", bis die API zurückgegeben wird... ich will einfach die "menu-link" angezeigt, aber es muss deaktiviert werden.
  • Diese sehen in eine Weile..
  • Sorry für die späte Antwort, können Sie die editierte Antwort von mir..

InformationsquelleAutor LDB | 2018-07-20
  1. 1

    Wenn Sie möchten, zu verwenden, egal, was Sie erreichen könnten, indem Sie einfach hinzuzufügen, klicken Sie auf Ereignis, um diesen link mit sowas:

    <a [routerLink]="route" routerLinkActive="active" class="menu-link" [class.disabled]="disabled ? true: null" (click)="check($event)">

    Im TS:

    isReady = false;
check = (event) => {
 if (!this.isReady) {
   event.preventDefault();
 }
}

    So isReady ist eine Boolesche variable der Komponente, und es ist falsch, bis Sie wollen. Wann immer Sie auf diesen link klicken, wird es prüfen, ob es wahr ist, aber wenn es falsch ist, es wird verhindert, dass das ursprüngliche Verhalten von der Veranstaltung, und nichts wird Feuer.

    InformationsquelleAutor dAxx_
  2. 1

    In der Komponente, haben eine fahne, die angibt, ob die API zurückgegeben hat..:

    apiReturned = false;

ngOnInit() {

   setTimeout(() => {
      //simulating API call, sets to true after 5 seconds
      this.apiReturned = true;
   }, 5000);
}

    Haben und Ihre HTML wie: 

     <a [class.disabled]="apiReturned ? null: true"  [href]="apiReturned ? 'https://stackoverflow.com/users/9442497/ldb' : null" >Click Me!</a>

    Hier habe ich auch entfernt href von der anchor wenn es soll deaktiviert werden.

    BEARBEITEN

    Wenn Ihr anchor-tag befindet sich in einer anderen Komponente, dann haben Sie zwei Möglichkeiten, um die Aufgabe zu erfüllen.

    1. Senden Sie die Route und die API den status der mat-link Komponente und entsprechend handeln
    2. Haben einen service, der den Wert des API-status von der übergeordneten Komponente und der Nutzung des Dienstes Daten in mat-link Komponente. Ich würde es vorziehen, mit einem service, da werden Sie auch zur Sperrung der Strecke von der URL-Leiste, wenn die API hat nicht zurückgegeben werden, mit Eingabe Sie können nur blockieren den link, aber das wird nicht helfen, wenn jemand direkt eingibt, die route, die url in die URL-Leiste. Sie können Eckig ist Route Guard um zu verhindern, dass das routing in solchen Fällen

    Ich erkläre die Verwendung für die erste Möglichkeit und die zweite Möglichkeit für Sie zu implementieren.

    In Ihrem mat-link Komponente.ts, die haben etwas wie:

    export class MatLinkComponent  {
  @Input() route: string;
  @Input() apiReturned: boolean;
}

    Und in Ihrem mat-link.component.html, so etwas wie:

    <a *ngIf="!apiReturned" href="#" [class.disabled]="!apiReturned" >Click Me!</a>

<a *ngIf="apiReturned" [routerLink]="route" routerLinkActive="active" >Click Me!</a>

    Konnten Sie feststellen, dass ich erstellt habe, zwei anchor - tags, die an Bedingungen geknüpft sind, ist dies, weil, routerlink nicht akzeptieren null und wir haben nicht so etwas wie bedingte routerLink noch.

    In der übergeordneten Komponente, sagen app.component.html oder wo immer Sie sind mit mat-link.component, so etwas wie:

    <mat-link 
      [apiReturned]=apiReturned
      [route]="'routinghere'">
</mat-link>

    Können Sie Sehen, ein Beispiel hier: Beispiel. Die Click Me! link aktivieren, nach 10 Sekunden..

    • Danke für die Antwort. Ok, ich versuchte dies. Jetzt jeder link ist deaktiviert, wenn apiReturned=false. Die api, die aufgerufen wird, _dealerPersistenceService.getSelectedDealer() ... Wie man sehen kann in meinem code oben den Menü-link ist versteckt, bis dieser Aufruf erfolgt. Wie schalte ich auf apiReturned =true 'a' - tag, sobald der Anruf getätigt wird?
    • Wo auch immer Sie sind, die den API-Aufruf, hier zu sagen, die Sie in der App componenet.. Also, wenn Ihr service ist wieder ein Observable können Sie etwas tun: _dealerPersistenceService.getSelectedDealer().subscribe((success)=>{// check success and then this.apiReturned = true })
    • Der API-Aufruf ist nicht eine beobachtbare
    • dann? Ist es ein Versprechen? Oder Sie abonnieren in der service selbst?
    • Diese Methode wird aufgerufen, in der .ts-Datei für den Menü-link-Komponente. Die Methode sieht wie folgt aus getDealerId() { return this._dealerPersistenceService.getSelectedDealer().id; } . Kann ich nicht einfach Umschalten, die apiReturned hier Eigentum? Es scheint nicht, dass ich angesichts der Eigenschaft vorhanden ist, die auf die untergeordnete Komponente 'a' tag
    • So,, wenn nennst du diese Methode? Legen Sie die apiReturned-flag auf true, wo Sie anrufen getDealerId()
    • Dies ist, was ich versucht habe.. Aber wie bekomme ich Zugriff auf die API boolean in der Komponente, wo die Methode aufgerufen wird?? Die Eigenschaft(apiReturned) erstellt, in der "matlinkComponent"(das ist die Kind-Komponente). Ich muss Umschalten, das boolean in der übergeordneten Komponente, der die Methode aufruft...
    • ist eine Eigenschaft, die sowohl paarent und das Kind. Schon auf den ersten. Es ist eine Eigenschaft von der Mutter und dann gesendet, wie eine input-Eigenschaft, um das Kind, D. H. mat-link. Didn&#39;t öffnen Sie den link habe ich Hinzugefügt, in der die Antwort als &quot;Beispiel&quot;? Sie werden sehen, dass ich bin ein-und ausschalten der fahne in der die Eltern selbst.

    InformationsquelleAutor xyz
  3. 0

    Eckige muss ein Weg, um selektiv gelten-Richtlinien, aber hier war meine Lösung:

    <a
    (click)="markAsRead(notification);notification.externalUrl || $event.preventDefault()"
    [href]="notification.externalUrl"
    target="_blank""
...>
    InformationsquelleAutor robert king
Schreibe einen Kommentar