Angular 2 组件
组件是 Angular JS 应用程序的一段逻辑代码。一个组件由以下部分组成：
-
Template ：这个是用来为应用渲染视图的。这包含需要在应用程序中呈现的 HTML。这部分还包括绑定和指令。
-
Class ：这就像用C等任何语言定义的类，它包含属性和方法。这具有用于支持视图的代码。它是在 TypeScript 中定义的。
-
Metadata ： 这里有为Angular类定义的额外数据。它是用装饰器定义的。
现在让我们转到 app.component.ts 文件并创建我们的第一个 Angular 组件。
让我们将以下代码添加到文件中，并详细查看每个方面。
Class
类装饰器。该类在 TypeScript 中定义。该类在 TypeScript 中通常具有以下语法。
语法
class classname {
Propertyname: PropertyType = Value
}
参数
-
班级名称 ： 这是要给班级起的名字。
-
属性名称 ： 这是该属性的名称。
-
财产种类 ： 由于TypeScript是强类型的，所以需要给属性一个类型。
-
Value ： 这是要赋予属性的值。
例子
export class AppComponent {
appTitle: string = 'Welcome';
}
在示例中，需要注意以下几点：
-
我们正在定义一个名为 AppComponent 的类。
-
使用 export 关键字，以便组件可以在 Angular JS 应用程序的其他模块中使用。
-
appTitle 是属性的名称。
-
该属性被赋予字符串的类型。
-
该属性的值是“欢迎”。
Template
这是需要在应用程序中呈现的视图。
语法
Template: ' <HTML code> class properties '
参数
-
HTML 代码 ： 这是需要在应用程序中渲染的HTML代码。
-
类属性 ：这些是类的属性，可以在模板中引用。
例子
template: '
<div>
<h1>{{appTitle}}</h1>
<div>To Newbie Go</div>
</div>
'
在示例中，需要注意以下几点：
-
我们正在定义将在我们的应用程序中呈现的 HTML 代码
-
我们还从我们的类中引用了 appTitle 属性。
Metadata
这用于用附加信息装饰 Angular JS 类。
让我们看一下包含我们的类、模板和元数据的完整代码。
例子
import { Component } from '@angular/core';
@Component ({
selector: 'my-app',
template: ` <div>
<h1>{{appTitle}}</h1>
<div>To Newbie Go</div>
</div> `,
})
export class AppComponent {
appTitle: string = 'Welcome';
}
在上面的例子中，需要注意以下几点：
-
我们使用 import 关键字从 angular/core 模块中导入“组件”装饰器。
-
然后我们使用装饰器来定义一个组件。
-
该组件有一个名为“my-app”的选择器。这不过是我们的自定义 html 标签，可以在我们的主 html 页面中使用。
现在，让我们转到代码中的 index.html 文件。
让我们确保 body 标签现在包含对组件中自定义标签的引用。因此在上述情况下，我们需要确保body标签包含以下代码：
<body> <my-app></my-app> </body>
现在，如果我们转到浏览器并查看输出，我们将看到输出是在组件中呈现的。
