尝试在 Angular 的新选项卡中打开网站但无法正常工作

Question

我有一个简单的情况，我认为它会很容易解决。但是卡住了。

我有一个标题组件。这里有两种情况：

1. 在登录之前，标题组件中的文本将为“LOGIN”，并且可以点击。点击后，它会将我带到另一个外部网址（假设https://www.external.com）。

2. 登录后，相同的标题组件，但文本将“登录”并且不可点击。

我尝试了什么

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

但是，它不会将我重定向到指定的网址，也不会打开新标签。 它只是刷新同一页面。

任何人都可以帮助我解决任何问题，以及是否可以解释为什么它不起作用。

谢谢。

Answer 1

您应该处理它是否可以在模板中而不是在 TS 逻辑中单击的逻辑。
也不要将 div 用于 onclick 事件，使用按钮或链接（在您的情况下，这是一个链接！）。您可以使用键盘聚焦它们，也可以在聚焦时按空格键单击它们。如果您使用语义正确的标签，在新窗口中打开它不会有问题。

类似这样的：

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

在您的 .ts 文件中，您有一个名为 loggedIn 的布尔变量，如果您已登录，则设置为 true，否则设置为 false。

如果您在两个容器中具有相同的内容，您可以为此创建它自己的组件（然后只需使用类似 app-header-content 而不是 ng-container 或您使用，就像我在上面的示例中所做的那样， use a template.

查看 other ways to implement if-else logic 的 Angular 文档