站长阿亮的python学习面试问答群,解决你的python问题 了解详情

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