app.component.html

Question

我是角度和实践指令以及数据绑定的新手。我的屏幕看起来像这样：

............................................... ................................................... ................................................... ...........

                                  Page Tile::

Button-1                          Button-2                Button-3

............................................... ................................................... ................................................... ...........

现在对于每个按钮，我都有单独的div。现在，我想一次只显示一个div。这意味着，如果我单击第一个按钮，则只应执行first div中的代码。

我已决定在html页面中具有4个div，并在其组件中分别包含4个div ID和一个screenId。 screenId的默认值为1，如下所示：

screenId = 1;  //default

默认情况下，默认情况下，我希望以上页面显示三个按钮

现在我想要的是单击button-1时的click事件，此screenId应该更改（按钮的screenId可以是我可以在常量文件中定义的任何内容），要使用* ng来检查html页面screenId匹配正确的ID，并通过执行button-1的div将其重定向到相应的页面。我想对button-2和button-3做类似的事情。

我该怎么做？

Answer 1

app.component.html

        <button type="button" (click)="loadTab("1")">btn1</button>
        <button type="button" (click)="loadTab("2")">btn2</button>
        <button type="button" (click)="loadTab("3")">btn3</button>

 // you can append && or || operator in html like below 
// <div *ngIf="screenId === 'tab1' && tab === 'abc'">tab1</div>      
       <div *ngIf="screenId === 'tab1'">tab1</div>
       <div *ngIf="screenId === 'tab2'">tab2</div>
       <div *ngIf="screenId === 'tab3'">tab3</div>
        <div *ngIf="screenId === 'tab4'">tab4</div>

.ts

screenId = "tab1"
    constructor(public router: Router){}

     loadTab(tab){
        if(tab === "1")
        this.screenId = "tab1"
        else if(tab === "2")
        this.screenId = "tab2"
        else if(tab === "3")
         this.screenId = "tab3"
        }

在按钮上单击显示数据

1 个答案:

app.component.html

.ts