如何在角度8中打开标签

Question

我正在尝试通过访问选项卡元素引用来打开选项卡，但无法正常工作。我如何访问我的标签元素参考。我已经编写了 selectTab 函数。如果我们通过选项卡元素引用选项卡将打开。但它不起作用。如果有人知道，请帮助解决这个问题。

如果我使用 ngif，我会遇到 selectTab 未定义问题。

app.component.html：

<tabs #main>
<tab #subone>Content</tab>
<tab #subtwo>Content</tab>
</tabs>

<button (click)="opentab1()">Sub One</button>
<button (click)="opentab2()">Sub Two</button>

app.component.ts：

@ViewChild('main') main: ElementRef;
@ViewChild('subone') subone: ElementRef;
@ViewChild('subtwo') subtwo: ElementRef;

opentab1(){

 this.main.selectTab(this.subone);

}

opentab2(){

 this.main.selectTab(this.subtwo);

}

演示：https://stackblitz.com/edit/angular-tabs-example-n8qv2e?file=src/app/app.component.ts

Answer 1

这取决于你想要达到的目标

你可以使用：

window.open(this.url)

在后面。

或者使用角度路由，如果你的意思是：

app-routing.modules.ts：

{
    path: 'component/:id', component: your_component
}

component.html：

target="_blank" [routerLink]="['/component', '/']"

或者只是使用事件：

html

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

ts

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

或者直接编码前一个：

(a href="https://www.example.com/" target="_blank">example</a)

Answer 2

为什么不直接使用 *ngIf？

<div *ngIf="tab==1">Content</div>
<div *ngIf="tab==2">Content</div>


<button (click)="opentab(1)">Sub One</button>
<button (click)="opentab(2)">Sub Two</button>

ts：

opentab(num) {
    this.tab=num; 
}