Wie kann ich bedingt verwenden entweder [href] oder [routerLink] auf einen Anker?

Brauche ich für den gleichen anchor-link hingewiesen werden kann, bedingt lokal oder auf externe Ressourcen. Ich habe versucht, 

<a [href]="outside?externalUrl:null"  [routerLink]="outside?[]:['/route',id]" >test</a>

Aber es funktioniert nicht. Ich bekomme keine Fehler, aber es verweist auf den gleichen lokalen Seite und ignoriert die externe URL. Irgendwelche Ideen?

Eine andere Möglichkeit wäre, zu konstruieren den link, aber ich finde keine docs, wie Sie Zugang zu routerLink im inneren ein service

Edit: ich weiß, ich kann Klonen, den ganzen link mit *ngIf aber ich will nicht, es zu tun, mein link enthält ein video-tag mit einem buch von Optionen

InformationsquelleAutor Toolkit | 2017-06-09
  1. 20

    Der einfachste Weg wäre, um *ngIf /else:

    <ng-container *ngIf="outside; else internalBlock">
  <a [href]="externalUrl">External</a>
</ng-container>

<ng-template #internalBlock>
  <a [routerLink]="['/route', id]">Internal</a>
</ng-template>

    EDIT#1: (Hässlichen workaround)

    Da Sie nicht wollen, zu verwenden *ngIf (ich verstehe immer noch nicht warum), Sie können dies tun:

    Vorlage:

    <a href="javascript:void(0)" (click)="handleClick(outside, '/route', id, externalUrl)">Link</a>

    Komponente:

    handleClick(outside: boolean, internalUrl: string, internalId: string, externalUrl: string): void {
  if (outside) {
    window.location.href = externalUrl;
    //You can also use Location class of Angular
  } else {
    this.router.navigate([`${internalUrl}/${internalId}`]);
  }
}
    • und <ng-template> nie Hinzugefügt, um den DOM in der browser Sie verarbeitet werden durch Eckige bevor der browser zu sehen bekommt, es. Ich verstehe nicht, was du meinst mit deinem Kommentar. Warum denkst du, dass ein Punkt der Liste wäre, kommen Sie einer separaten Liste? Auch die Frage sagt nichts über eine Liste.
    • Beispiel-code nicht funktionieren, <ng-template - > sollte außerhalb der <ng-container>
    • ops, mein Fehler. Danke, ich habe es behoben.
    • yup, *ngIf ist der Weg zu gehen...
    • NÖ, die Schraube Winkel-router
    • Warum wird es Schrauben Sie den router?

    InformationsquelleAutor developer033
  2. 3

    Bedingte href voranstellen auf attr. vor dem href arbeitete für mich mit null als einen Wert, wie diese:

    [attr.href]="!item.subMenu ? item.url : null"
    InformationsquelleAutor ohjeeez
  3. 1

    Können Sie den Zugriff routerLink Instanz durch Einspritzen RouterLinkWithHref in der Richtlinie.

    Richtlinie:

    @Directive({
  selector: '[externalLink]'
})
export class ExternalLinkDirective {

  @Input() externalLink: string;

  constructor(
    //Inject RouterLinkWithHref
    @Optional() private link: RouterLinkWithHref
  ) { 

    if (!link) {
      return;
    }

    //Save original onClick method
    const onClick = link.onClick;

    //Replace method with your own (I know this is not good idea)
    link.onClick = (...args: any[]) => {
      if (this.externalLink) {
        //Process external url
        window.location.href = this.externalLink;
        return false;
      } else {
        //Process internal url by calling routerLink original method
        return onClick.apply(link, args);
      }
    }

  }

}

    Verwendung:

    <!-- Ignore router link and use external link -->
<a routerLink="/some/path" externalLink="https://google.com">Link</a>

    Nachteil dieses Ansatzes - href Attribut in den DOM nicht geändert

    InformationsquelleAutor taras-d
  4. 0

    Nach einer Menge Untersuchungen, die ich umgesetzt habe eine andere Herangehensweise an dieses Problem, da mein <a href>...</a>enthält code inside (einen anklickbaren div-Beispiel). Zum Beispiel, ich will nicht ngIf denn das zwingt mich zu duplizieren div drin-code. Dies ist also meine Lösung:

    Komponente HTML -

    <div>
   <a [href]="getRouterLink()" >
     <div class="section">
     <!-- stuff inside the div -->
     </div>   
   </a>
</div>

    Komponente JS

    Component({
selector: 'app-home-section',
templateUrl: './home-section.component.html',
styleUrls: ['./home-section.component.scss']
})
export class HomeSectionComponent implements OnInit {

@Input() link: string;

constructor(private router: Router) { }

ngOnInit() {
}

isRouterLink() {

  if (this.link) {
    let firstLinkChar = this.link.charAt(0);
    let isSlash = firstLinkChar == '/';
    return isSlash;
  }

  return false;
}

getRouterLink() {

  let url = this.isRouterLink() ? window.location.origin + this.link : 'http://' + this.link;  
return url;
 }
}

    Dies war der einzige Weg, um es Arbeit einfacher, weil auch ich die "www.example.com" direkt zum href (mit oder ohne [ ]), immer hängen Sie die Basis-url. Es ist nicht schön, aber funktional.

    InformationsquelleAutor Tito Leiva
Schreibe einen Kommentar