我在 Tailwind 下購買了一個 HTML 模板，不幸的是，由于我的 Angular 組件中的 <div @click.outside> 之類的系結，我遇到了很多錯誤。
這是 Angular-cli 編譯器有問題的代碼示例
<div
id="sidebar"
class="flex flex-col absolute z-40 left-0 top-0 lg:static lg:left-auto lg:top-auto lg:translate-x-0 h-screen overflow-y-scroll lg:overflow-y-auto no-scrollbar w-64 lg:w-20 lg:sidebar-expanded:!w-64 2xl:!w-64 shrink-0 bg-slate-800 p-4 transition-all duration-200 ease-in-out"
:class="sidebarOpen ? 'translate-x-0' : '-translate-x-64'"
@click.outside="sidebarOpen = false"
@keydown.escape.window="sidebarOpen = false"
x-cloak="lg"
>
在這段代碼 中@click.outside="sidebarOpen = false"并且@keydown.escape.window="sidebarOpen = false"有問題
這是我得到的錯誤的圖片
我已經按照本教程安裝tailwindcss https://tailwindcss.com/docs/guides/angular
我安裝了這 3 個軟體包tailwindcss：postcss和autoprefixer
uj5u.com熱心網友回復：
在您發布的示例中，tailwindcss 團隊正在使用一個名為Alpine.js的 javascript 框架來呈現您所看到的模板。這是一個與 Angular 不同的框架，截至今天，tailwind 團隊不提供任何 Angular 組件。但是，您可以通過參考我鏈接的 alpine.js 檔案并將這些模板轉換為 Angular 代碼，并撰寫適當的 Angular 代碼以啟用您正在尋找的功能。
例如，alpine's@click=""等價于 angular's (click)=""。同樣，alpine's:等價于 angular's [ngClass]=""。
現在，請記住，它不僅僅是各種系結的簡單轉換，而且噗，它會起作用。您還必須撰寫所有您自己的相關 javascript 以啟用所需的功能。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/515372.html