How can I conditionally use [href] or [routerLink] on the binding?

Question

I need the same anchor link to be pointed conditionally locally or to an external resource. I did my best

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

But that does not work. I am not getting any errors, but it points to the same local page and ignores the external URL. Any ideas?

Another option is to create a link, but I can’t find any documents on how to access the routerLinkservice inside.

Edit: I know that I can clone an entire link using *ngIfbut I don’t want to do this, my link contains a video tag with a set of parameters

Answer 1

finished doing it

<a [href]="_service.ifLink(outside,'/route',id,externalUrl)" >Link</a>

and service

public ifLink(outside,internal,internalId, external) {
  if(outside)
      return external
    return  `${internal}/${internalId}`
  }

URL- temp jQuery ngAfterViewInit click, , -, Angular 2

  ngAfterViewInit() {
    if (this.replacing)
      this.replaceHref()
  }
 links:any;

  replaceHref() {
    this.links = $('a')
    for (var i = 0; i < this.links.length; i++) {
      var extHrefEl = $(this.links[i]).attr('exthref')
      if (extHrefEl) {
        var extHref = $(this.links[i]).attr('exthref')
        $(this.links[i]).attr('href', extHref);
        $(this.links[i]).click(function () {
          window.location.href = extHref;
        });
      }
    }

  }

 <a [attr.exthref]="externalUrl"  [routerLink]="['/route',id]">Link</a>

Answer 2

- *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>

№ 1: ( )

*ngIf ( , ), :

:

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

:

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}']);
  }
}

Answer 3

href, attr. href , null , :

[attr.href]="!item.subMenu ? item.url : null"

Answer 4

routerLink, RouterLinkWithHref .

@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);
      }
    }

  }

}

:

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

---

- href DOM

Answer 5

, <a href>...</a> (, div). , ngIf div . :

HTML

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

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;
 }
}

, "www.example.com" href ( [ ]), URL. , .