免费AI编程助手
Angular 2 属性指令
描述
attribute指令改变DOM元素的外观或行为。 这些指令在模板中看起来像常规HTML属性。 用于双向的ngModel指令是属性指令的示例。 下面列出了一些其他属性伪指令：
NgSwitch：只要你想显示一个由许多孩子组成的元素树。 Angular仅基于某些条件将选定的元素树放入DOM中。
NgStyle：基于组件状态，可以使用NgStyle设置动态样式。 许多内联样式可以通过绑定到NgStyle同时设置。
NgClass：它通过动态添加和删除CSS类来控制元素的外观。
例子
下面的例子描述了在Angular 2中使用属性指令:
<html>
<head>
<title>Contact Form</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="/attachments/w3c/es6-shim.min.js"></script>
<script src="/attachments/w3c/system-polyfills.js"></script>
<script src="/attachments/w3c/angular2-polyfills.js"></script>
<script src="/attachments/w3c/system.js"></script>
<script src="/attachments/w3c/typescript.js"></script>
<script src="/attachments/w3c/Rx.js"></script>
<script src="/attachments/w3c/angular2.dev.js"></script>
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
packages: {'app': {defaultExtension: 'ts'}}
});
System.import('/angular2/src/app/attribute_main')
.then(null, console.error.bind(console));
</script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
上述代码包括以下配置选项：
-
您可以使用typescript版本配置index.html文件。在使用transpiler选项运行应用程序之前，SystemJS将TypeScript转换为JavaScript。
-
如果在运行应用程序之前没有翻译到JavaScript，您可能会看到浏览器中隐藏的编译器警告和错误。
-
当设置emitDecoratorMetadata选项时，TypeScript会为代码的每个类生成元数据。如果不指定此选项，将生成大量未使用的元数据，这会影响文件大小和对应用程序运行时的影响。
-
Angular 2包括来自app文件夹的包，其中文件将具有.ts扩展名。
-
接下来它将从应用程序文件夹加载主组件文件。如果没有找到主要组件文件，那么它将在控制台中显示错误。
-
当Angular调用main.ts中的引导函数时，它读取Component元数据，找到“app”选择器，找到一个名为app的元素标签，并在这些标签之间加载应用程序。
要运行代码，您需要以下TypeScript(.ts)文件，您需要保存在应用程序文件夹下。
attribute_main.tsimport {bootstrap} from 'angular2/platform/browser'; //importing bootstrap function
import {AppComponent} from "./attribute_app.component"; //importing component function
bootstrap(AppComponent);
现在我们将在TypeScript（.ts）文件中创建一个组件，我们将为该组件创建一个视图。
attribute_app.component.tsimport {Component} from 'angular2/core';
import {ShoppingListComponent} from './shopping-item.component';
@Component({
selector: 'my-app',
template: `
<shopping></shopping>
`,
directives: [ShoppingListComponent]
})
export class AppComponent {
}
-
@Component是一个装饰器，它使用配置对象来创建组件及其视图。
-
选择器创建组件的实例，在父HTML中找到<my-app>标记。
-
接下来，我们创建一个名为ShoppingListComponent的指令，它将从shopping-item.component文件中访问。
import {Component} from "angular2/core";
import {NgSwitch} from "angular2/core";
import {NgSwitchWhen} from "angular2/core";
import {NgSwitchDefault} from "angular2/core";
import {NgClass} from 'angular2/common';
@Component({
selector: "shopping",
template: `
<h2>Shopping Items</h2>
<ul>
<li
*ngFor="#shopItem of shopItems"
(click)="onItemClicked(shopItem)"
>{{ shopItem.name }}</li>
</ul>
<span [ngSwitch]=selectedItem.name>
<p>You selected :
<span *ngSwitchWhen="'Shirt'">Shirt</span>
<span *ngSwitchWhen="'Pant'">Pant</span>
<span *ngSwitchWhen="'Sarees'">Sarees</span>
<span *ngSwitchWhen="'Jeans'">Jeans</span>
<span *ngSwitchWhen="'T-Shirt'">T-Shirt</span>
<span *ngSwitchDefault>Nothing</span>
</p>
</span>
<div [ngStyle]="setStyles(selectedItem.name)" class="text-success">
Thank you for Selecting an item!!
</div>
<button [ngClass]="{active: isActive}" (click)="isActive = !isActive">Buy Items</button>
`,
styles: [`
.button {
width: 120px;
border: medium solid black;
}
.active {
background-color: red;
}
p{
font-weight: bold;
}
`]
directives: [NgClass]
})
export class ShoppingListComponent {
public shopItems = [
{name: "Shirt"},
{name: "Pant"},
{name: "Sarees"},
{name: "Jeans"},
{name: "T-Shirt"},
];
public selectedItem = {name: ""};
onItemClicked(shopItem) {
this.selectedItem = shopItem;
}
setStyles(item) {
let styles = {
'font-size' : item? '24px' : 'none',
'visibility' : !item? 'hidden' : 'visible'
}
return styles;
}
}
-
局部变量shopItem可以在模板中引用并获取数组的索引。 Angular 2将使用模板的局部变量绑定来自数组的模型名称。
-
当你点击项目的值，onItemClicked()事件将获得激活和Angular 2将绑定模型名称从数组与模板的局部变量。
-
NgSwitch指令根据匹配表达式与从评估的开关表达式获得的值匹配插入嵌套元素。 它显示一个元素，其* ngSwitchWhen匹配当前的ngSwitch表达式值。
-
onItemClicked()方法使用局部变量“shopItem”作为参数，并使用selectedItem对象显示所选项目。
输出
让我们执行以下步骤，看看上面的代码如何工作：
将上面的HTML代码保存为index.html文件，如同我们在环境章节中创建的，并使用上面的包含.ts文件的应用程序文件夹。
打开终端窗口并输入以下命令：
npm start
稍后，浏览器选项卡应打开并显示输出，如下所示。
或者你可以用另一种方式运行这个文件：
将上面的HTML代码作为attribute_directive.html文件保存在服务器根文件夹中。
将此HTML文件打开为http：//localhost/attribute_directive.html，并显示如下所示的输出。
更多建议：