如何在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小时内与您取得联系。

整合营销服务商