각도를 사용하여 새 탭에서 링크를 여는 방법은 무엇입니까?

84

새 탭에서 링크를 열어야하는 각도 5 구성 요소가 있는데 다음을 시도했습니다.

<a href="www.example.com" target="_blank">page link</a>

링크를 열면 응용 프로그램이 느려지고 다음과 같은 경로가 열립니다.

localhost:4200/www.example.com

내 질문은 : 각도에서 이것을 수행하는 올바른 방법은 무엇입니까?

— AlejoDev
소스

3

이것은 나를 위해 작동<a href="https://example.com" target="_blank">page link</a>

— M 만수르

그냥 사용할 수 있습니다<a [href]="'www.example.com'" target="_blank">Link</a>

— Coach

121

사용 window.open(). 매우 간단합니다!

귀하의 component.html파일에서

<a (click)="goToLink("www.example.com")">page link</a>

귀하의 component.ts파일에서

goToLink(url: string){
    window.open(url, "_blank");
}

— 하루 누르 라시드
소스

누군가 goToLink 함수 내의 문자열이 '마법의 문자열'이 아닌 경우이를 수행하는 방법을 지적 할 수 있습니까? 예를 들어, 변수를 통해?

— Brian Allan West

@BrianAllanWest 해당 구성 요소 파일에 변수를 설정하고 매개 변수를 html에 남겨 둡니다. 이것이 작동하지 않으면 기본 바인딩 속성 []을 사용하여 템플릿에 바인딩 한 다음 원하는 논리를 실행할 수 있습니다. .html goToLink () .ts goToLink () {window.open (Your Variable Here, "_blank")}

— thenolin

작은 팝업 창에 표시하고 URL의 변경 사항을 수신하려면 어떻게해야합니까?

— Mostafa Al Belliehy

나는를 추가 할 수 href=''는 클릭 외모 스틸 사진으로, 그래서

— 레오나르도 릭

_blank 없이 사용할 수 있습니다. 기본적으로 새 탭이 열립니다.

— Yury Matatov 20.09.05

36

다음과 같이 전체 URL을 href로 사용하십시오.

<a href="https://www.example.com/" target="_blank">page link</a>

— 지민
소스

11

<a [routerLink]="" (click)="openSite(SiteUrl)">{{SiteUrl}}</a>

그리고 Component.ts에서

openSite(siteUrl) {
   window.open("//" + siteUrl, '_blank');
}

— 존 안토니 로무 알도
소스

나를 위해 그것은 단지 "//"없이 작동

— 니콜라스

1

사용하는 경우 "//"+ SITEURL 다음은 https : // 또는 http : // 어쩌면의 SITEURL에 최선을 다하고해야 당신 @Nicolas에 대한 문제를 일으키는 그

— 보스 티안 Pišler

10

에서 app-routing.modules.ts파일 :

{
    path: 'hero/:id', component: HeroComponent
}

에서 component.html파일 :

target="_blank" [routerLink]="['/hero', '/sachin']"

— 페미나
소스

8

방금 라우터로 새 탭을 여는 다른 방법을 발견했습니다.

템플릿에서

<a (click)="openNewTab()" >page link</a>

그리고 component.ts에서 serializeUrl을 사용하여 경로를 문자열로 변환 할 수 있습니다. window.open()

openNewTab() {
  const url = this.router.serializeUrl(
    this.router.createUrlTree(['/example'])
  );

  window.open(url, '_blank');
}

— 웬준
소스

5

이 시도:

 window.open(this.url+'/create-account')

사용할 필요가 없습니다 '_blank'. window.open기본적으로 새 탭에서 링크를 엽니 다.

— DINESH Adhikari
소스

1

그는 왜 그것을 시도해야합니까? 그게 무엇을합니까?

— Andreas

1

이 "각 5에서 새 탭에서 링크 열기에 방법"새 탭에서 기본적 열린 링크로는 window.open이 질문의 답변입니다

— DINESH 두루 아드 히카리

5

그냥 추가 target="_blank"하십시오

<a mat-raised-button target="_blank" [routerLink]="['/find-post/post', post.postID]"
    class="theme-btn bg-grey white-text mx-2 mb-2">
    Open in New Window
</a>

— C.이 콩고
소스

2

일부 브라우저는에서 만든 팝업을 차단할 수 있습니다 window.open(url, "_blank");. 대안은 링크를 만들고 클릭하는 것입니다.

...

  constructor(@Inject(DOCUMENT) private document: Document) {}
...

  openNewWindow(): void {
    const link = this.document.createElement('a');
    link.target = '_blank';
    link.href = 'http://www.your-url.com';
    link.click();
    link.remove();
  }

— 모를로 음 바콥
소스

0

바인딩 속성 오순절 경로를 시도 할 수 있습니다

당신의 component.ts에서 user:any = 'linkABC';

component.html에서 <a target="_blank" href="yourtab/{{user}}">new tab </a>

— jdcreativemaker
소스