如何在Angular應用程序中插入自定義 CSS？這

如何在Angular應用程序中插入自定義 CSS？這里有答案！

endo UI致力于新的開發，來滿足不斷變化的需求，通過React框架的Kendo UI JavaScript封裝來支持React Javascript框架。

Kendo UI for Angular是專用于Angular開發的專業級Angular組件，telerik致力于提供純粹的高性能Angular UI組件，無需任何jQuery依賴關系。

Kendo UI官方最新版免費下載試用，歷史版本下載，在線文檔和幫助文件下載-慧都網

為什么需要在 Angular 應用程序中插入自定義 CSS？

自定義 CSS文件能夠使應用程序與現有網站的風格相匹配。
開發多個Angular 應用程序時，使用自定義 CSS便于為所有應用程序創建一致的外觀。
自定義 CSS 是將個人風格添加到 Angular 應用程序的好方法。比如，想用特定的配色方案來添加一些自定義字體。

現在我們知道了在 Angular 應用程序中插入自定義 CSS的原因，下面我們一起來學習如何在 Angular 應用程序中插入自定義CSS文件。

步驟1：創建一個簡單的 Angular 項目

首先，在命令提示符下使用以下命令安裝 Angular。

npm install -g @angular/cli

現在讓我們使用以下命令創建新項目：

ng new my-app

要使用以下命令運行應用程序：

cd my-app
ng serve --open

完成！您的應用程序應自動在瀏覽器中打開。

步驟2：應用自定義字體

現在要使用自定義字體，讓我們在 src/index.html 文件中添加一些標題和段落：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<div class="login-box">
<h2>Login</h2>
<form>
<div class="user-box">
<input type="text" name="" required="">
<label>Username</label>
</div>
<div class="user-box">
<input type="password" name="" required="">
<label>Password</label>
</div>
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span>
Submit
</a>
</form>
</div>
</body>
</html>

輸出：

如您所見，文件中現在沒有 CSS，所以讓我們通過自定義 CSS 文件將其添加回來。

步驟 3a：將 CSS 文件添加到項目

添加自定義 CSS 的一種方法是將 CSS 文件添加到項目中。

style.css在文件夾中創建一個名為的文件src/assets/css并粘貼以下代碼：

{
height: 100%;
}
body {

font-family: sans-serif;
background: linear-gradient(#141e30, #243b55);
}

.login-box {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
padding: 40px;
transform: translate(-50%, -50%);
background: rgba(0,0,0,.5);
box-sizing: border-box;
box-shadow: 0 15px 25px rgba(0,0,0,.6);
border-radius: 10px;
}

.login-box h2 {
margin: 0 0 30px;
padding: 0;
color: #fff;
text-align: center;
}

.login-box .user-box {
position: relative;
}

.login-box .user-box input {
width: 100%;
padding: 10px 0;
font-size: 16px;
color: #fff;
margin-bottom: 30px;
border: none;
border-bottom: 1px solid #fff;
outline: none;
background: transparent;
}
.login-box .user-box label {
position: absolute;
top:0;
left: 0;
padding: 10px 0;
font-size: 16px;
color: #fff;
pointer-events: none;
transition: .5s;
}

步驟 3b：通過更新全局 CSS 文件在 Angular 應用程序中插入自定義 CSS

在這個方法中，我們將在 assets 文件夾中添加一個 CSS 文件，并將其導入到全局 style.css 文件中。這將使我們能夠在我們的項目中使用自定義 CSS 文件。由于我們已經在文件夾中添加了文件，因此我們只需要更新代碼即可。

首先，轉到 src 根文件夾中名為 styles.css 的主要 CSS 文件。這個 style.css 文件是一個全局聲明的文件。在這里，您將導入所有 CSS 鏈接，如以下 CSS 代碼。

@import './assets/css/styles.css';

如果您有多個 CSS 文件，則必須將它們一一導入。

現在您可以通過再次加載索引頁面來檢查頁面是否正常工作：

步驟 3c：通過更新 Angular.json 插入自定義 CSS

在這個方法中，我們將在 angular.json 文件中的樣式標簽中添加 CSS 文件的路徑，如下所示：

 "styles": [
              "src/styles.css",
              "src/assets/css/styles.css"
            ],

注意：如果應用程序在添加路徑后無法運行，請使用 Ctrl + C 關閉應用程序并使用以下命令重新啟動 Angular 應用程序。

ng serve –open

提示：如果您想添加自定義 JavaScript，上述所有方法都適用，但請記住在文件的腳本標記中添加 JavaScript 文件的路徑angular.json。這將確保您的 JavaScript 文件已加載并可供 Angular 應用程序使用。

這篇文章中，我們將按照一步一步的方法將Ignite UI Angular庫添加到現有的Angular應用程序中。

假設您已經在處理現有的Angular項目，并且希望將Angular庫的Ignite UI添加到項目中。在這篇博文中，我們將按照一步一步的方法將Ignite UI Angular庫添加到現有的Angular項目中。

第1步：為Angular庫添加Ignite UI

首先在項目中添加Ignite UI Angular庫。我們可以用npm來做這件事。因此，運行下面顯示的命令為Angular安裝Ignite UI。

npm install igniteui-angular

第2步：添加Hammer.js

接下來，您需要安裝Hammer.js，因為Angular的Ignite UI使用Hammer.js進行手勢。

npm install Hammerjs

第3步：修改angular.json文件

在為Angular安裝Ignite UI之后，請確保該項目引用了Angular樣式的Ignite UI和angular.json文件中的Hammer.js庫。修改angular.json文件，如下所示：

"styles": [
"src/styles.css",
"node_modules/igniteui-angular/styles/igniteui-angular.css"
],
"scripts": [ "node_modules/hammerjs/hammer.min.js" ]

我們在樣式和腳本部分添加了引用，如下圖所示：

第4步：修改style.css

Ignular UI的Ignite UI使用Material Icons。讓我們將它們導入styles.css文件，如下所示：

@ import url（'https://fonts.googleapis.com/icon?family=Material+Icons'）;

第5步：導入Hammer.js

我們已經安裝了Hammer.js，然后我們需要將Hammer.js導入main.ts文件，如下所示：

import 'hammerjs';

導入后，main.ts應具有以下導入：

通過此步驟，我們將Angular的Ignite UI添加到現有的Angular項目中并配置了所需的文件。

第6步：使用組件

我們將使用Ignite UI for Angular DatePicker組件來測試是否所有內容都已正確配置和安裝。

添加 igx-datePicker 到組件模板中，如下面的清單所示：

<igx-datePicker item-width="50%" [value]="date" [formatter]="formatter">
</igx-datePicker>

然后在組件類中添加以下代碼以進行配置：

日格式化程序
月格式化程序

publicpublic datedate: : DateDate==newnew DateDate((DateDate..nownow());());
privateprivate dayFormatterdayFormatter==newnew IntlIntl..DateTimeFormatDateTimeFormat(('en''en', { , { weekdayweekday: : 'long''long' }); });
privateprivate monthFormattermonthFormatter==newnew IntlIntl..DateTimeFormatDateTimeFormat(('en''en', { , { monthmonth: : 'long''long' }); });
publicpublic formatterformatter==( (__: : DateDate) )=>=> { {
returnreturn `You selected ${`You selected $ this.dayFormatter.format(_)}, ${_.getDate()} ${this.monthFormatter.format(_)}, ${_.getFullYear()}`;
}

此外，要使用該 datePicker 組件，您需要添加以下模塊。

imports: [
BrowserModule, BrowserAnimationsModule, IgxDatePickerModule
],

運行應用程序

現在，當您運行應用程序時，您應該會看到datePicker Ignite UI for Angular中的組件已添加到應用程序中。您可以選擇日期并顯示。

我希望本文能夠幫助您將Ignite UI Angular庫添加到現有的Angular項目中。

面的指令可用于綁定應用程序數據到HTML DOM元素的屬性。

S.No.	名稱	描述
1	ng-disabled	禁用給定的控制
2	ng-show	顯示了一個給定的控制
3	ng-hide	隱藏一個給定的控制
4	ng-click	表示一個AngularJS click事件

　　ng-disabled 指令

　　添加ng-disabled屬性到一個HTML按鈕，并把它傳遞模型。綁定模型到復選框，來看看變化。

<input type="checkbox" ng-model="enableDisableButton">Disable Button
<button ng-disabled="enableDisableButton">Click Me!</button>12復制代碼類型：[html]

　　ng-show 指令

　　添加 ng-show 屬性到HTML按鈕，并把它傳遞到模型。該模型綁定復選框。

<input type="checkbox" ng-model="showHide1">Show Button
<button ng-show="showHide1">Click Me!</button>

1234復制代碼類型：[html]

　　ng-hide 指令

　　添加 ng-hide 屬性到HTML按鈕，并把它傳遞模型。該模型綁定復選框。

<input type="checkbox" ng-model="showHide2">Hide Button
<button ng-hide="showHide2">Click Me!</button>

1234復制代碼類型：[html]

　　ng-click 指令

　　添加ng-click屬性到一個HTML按鈕，更新模型。綁定模型到HTML如下所示。

<p>Total click: {{ clickCounter }}</p></td>
<button ng-click="clickCounter=clickCounter + 1">Click Me!</button>

開課吧廣場-人才學習交流平臺

在線咨詢

上一篇：最簡單用js實現計算器的方法
下一篇：Java對接微信、支付寶、銀聯第三方支付

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商