程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

Trying to open a site in new tab in Angular but not working

发布于2023-03-23 03:27     阅读(1159)     评论(0)     点赞(29)     收藏(1)


I have a simple situation and I thought it will be resolved easily. But got stuck.

I have a header component. There are two situations here:

  1. Before login, the text in header component will be "LOGIN" and it will be clickable. On click, it will take me to another external url (lets assume https://www.external.com).

  2. After login, the same header component but text will be "LOGGED IN" and it won't be clickable.

WHAT I TRIED

HTML File (header.html)

<div class="brand pull-left" (click)="onHeaderClick()">    
    <div class="logo"></div>
    <h1>{{headerText}}</h1>  
  </div>



Typescript File (header.ts)

onHeaderClick() {
    debugger;
    if(!this.isLoggedIn) {
      window.open('https://www.external.com', '_blank');
    }
  }

But, its not redirecting me to the specified url and not also opening a new tab. Its just refreshing the same page.

Can anybody please help me out with any solution and also if it can be explained why its not working.

Thanks.


解决方案


You should handle the logic of if it's clickable in the Template and not in the TS-logic.
Also don't use divs for onclick events, use buttons or links (in your case this is a link!). You can focus them with the keyboard and also click them with pressing spacebar while it's focused. If you use the semantically correct tag you won't have problems opening it in a new window.

Something like this:

<ng-template #contentTemplate>
   <div class="logo"></div>
   <h1>{{headerText}}</h1>  
</ng-template>

<div *ngIf="!loggedIn; else loggedInBlock">
  <a class="brand pull-left" href="https://www.example.com" target="_blank" > 
   <ng-container [ngTemplateOutlet]="contentTemplate">
</ng-container>
  </a>
</div>
<ng-template #loggedInBlock>
  <ng-container [ngTemplateOutlet]="contentTemplate">
</ng-container>
</ng-template>

And in your .ts file you have a boolean variable named loggedIn If you are logged in this is set to true, otherwise it's set to false.

If you have the same content in both containers, you can either create it's own component for this (and then just use something like app-header-content instead of the ng-container or you use, as I did in the example above, use a template.

Check Angular documentation for other ways to implement if-else logic




所属网站分类: 技术文章 > 问答

作者:黑洞官方问答小能手

链接:http://www.qianduanheidong.com/blog/article/512834/1497c05137c21cd2b544/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

29 0
收藏该文
已收藏

评论内容:(最多支持255个字符)