帶按鈕的角度隱藏

因此，我正在使用角度，我正在嘗試製作一個按鈕，點擊時消失。我試圖使用[隱藏]，（點擊）=「showHide =！showHide」，以及其他一些方法。到目前爲止沒有任何工作。帶按鈕的角度隱藏

我的HTML（目前）：

<div class="rows"> 
<div class="a-bunch-of-styles-for-my-button"> 
    <a type="button" class="more-styles" (click)="inboundClick = !inboundClick" [routerLink]="['/inbound']" href=""> 
    </a> 
</div> 
</div>

和我的組件：

export class AppComponent { 
inboundClick = false; 
}

在本質上我有一個頁面上的2個鍵，當按下一個按鈕，我想隱藏按鈕並顯示一組新按鈕。

我對Angular非常陌生，我很困惑，爲什麼這樣做不行。

來源

2017-08-07 RaptorJesus

你在組件中有一個拼寫錯誤：'flase'應該是'false'。您可以加入您要顯示的按鈕模板在你的問題 – 0mpurdy

@ 0mpurdy它不是拼錯了在實際的代碼/隱藏也是如此。 – RaptorJesus

好的，只是檢查:)它也可能是值得嘗試複製問題在一個plunk [這裏是一個模板]（https://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5）。隱藏的最佳指令可能是'* ngIf' - [這是一個教程]（https://angular-2-training-book.rangle.io/handout/directives/ng_if_directive.html） – 0mpurdy

你的HTML

<div class="yourCssClass" *ngIf="this.isButtonVisible" (click)="this.isButtonVisible = false"> 
... 
</div>

您的打字稿

export class AppComponent { 
    private isButtonVisible = true; 
}

這應該做的工作。 *ngIf自動隱藏元素，如果條件評估爲false，則將該變量設置爲false就足夠了。

我在這裏看到的問題是，你無法控制任何一點的能見度。使用[ngClass]添加特定的類，如果滿足條件或者*ngIf有幫助，則每當您嘗試更改用戶交互元素時。

有關[ngClass]的更多信息，你可以看到這裏的用法：https://angular.io/api/common/NgClass

你可以閱讀*ngIf這裏：https://angular.io/api/common/NgIf

特別是「共同使用」的部分應該是你感興趣的。

編輯： 閱讀您的評論如下好像你沒注意到什麼[hidden]和(click)怎麼做。 [hidden]控制元素的可見性，通常取決於特定的條件。然而，(click)是一種將Click-Event綁定到元素的快速方法。

使用這兩種工具可以通過更改變量來隱藏元素，如果用戶單擊元素（變量的新值可能由(click)調用的函數或內聯指定，如示例代碼）。

EDIT2：是的，你的意思是Angular2/4;）因此，這應該做的工作。

來源

2017-08-07 14:41:37 GxTruth

Angular現在引用了2.0.0以上版本的所有Angular版本，AngualrJS引用了之前的所有版本。所以實際上我正在使用Angular 4，但它與2相似，現在使用相同的名稱。 – RaptorJesus

這也很好。有沒有辦法做一個元素回來？ – RaptorJesus

是的！ * ngIf不會隱藏元素，如果條件評估爲「true」，那麼將變量「isButtonVisible」設置爲「true」就足夠了。只需將'（click）'事件代碼更改爲切換函數，如'（click）=「this.isButtonVisible =！this.isButtonVisible」'。但是，您可以將變量設置爲任意位置（這可以是另一個按鈕，如重置按鈕）。 – GxTruth

這裏是你如何能做到這一點：

在你component.html：

<a type="button" class="more-styles" 
    [hidden]="!inboundClick" 
    (click)="inboundClick = !inboundClick" 
    [routerLink]="['/inbound']" href=""> 
</a> 

<a type="button" class="more-styles" 
    [hidden]="!outboundClick " 
    (click)="outboundClick = !outboundClick " 
    [routerLink]="['/outbound']" href=""> 
</a>

...在你的AppComponent：

export class AppComponent { 
    inboundClick = true; 
    outboundClick = true; 
}

PLUNKER DEMO

來源

2017-08-07 14:34:07 Faisal

這個工作很完美。我沒有意識到你必須同時使用[隱藏]和（點擊）。最後，如果點擊了不同的按鈕，可以用組件中的其他變量翻轉它以再次顯示它？ – RaptorJesus

檢查我創建的鏈接鏈接：https://plnkr.co/edit/BGIQZV7V69pYUPuO2sFV?p=preview – Faisal

@RaptorJesus爲什麼downvoted？該解決方案按照您的要求工作。奇怪：/ – Faisal

帶按鈕的角度隱藏

回答

相關問題