Angular 2 - 元件

元件是Angular JS應用程式中的一段邏輯程式碼。一個元件包含以下內容：

模板 - 用於渲染應用程式檢視。包含需要在應用程式中渲染的HTML。此部分還包括繫結和指令。
類 - 類似於C等任何語言中定義的類。包含屬性和方法。包含用於支援檢視的程式碼。在TypeScript中定義。
元資料 - 包含為Angular類定義的額外資料。使用裝飾器定義。

現在讓我們進入app.component.ts檔案，建立我們的第一個Angular元件。

讓我們將以下程式碼新增到檔案中，並詳細檢視各個方面。

類

類裝飾器。類在TypeScript中定義。類在TypeScript中通常具有以下語法。

語法

class classname {
   Propertyname: PropertyType = Value
}

引數

類名 - 賦予類的名稱。
屬性名 - 賦予屬性的名稱。
屬性型別 - 由於TypeScript是強型別的，因此需要為屬性指定型別。
值 - 賦予屬性的值。

示例

export class AppComponent {
   appTitle: string = 'Welcome';
}

在示例中，需要注意以下幾點：

我們正在定義一個名為AppComponent的類。
使用export關鍵字，以便可以在Angular JS應用程式中的其他模組中使用該元件。
appTitle是屬性的名稱。
屬性被賦予字串型別。
屬性被賦予“Welcome”的值。

模板

這是需要在應用程式中渲染的檢視。

語法

Template: '
   <HTML code>
   class properties
'

引數

HTML程式碼 - 這是需要在應用程式中渲染的HTML程式碼。
類屬性 - 這些是可以在模板中引用的類的屬性。

示例

template: '
   <div>
      <h1>{{appTitle}}</h1>
      <div>To Tutorials Point</div>
   </div>
'

在示例中，需要注意以下幾點：

我們正在定義將在我們的應用程式中渲染的HTML程式碼
我們還引用了我們類中的appTitle屬性。

元資料

這用於使用附加資訊裝飾Angular JS類。

讓我們看看包含我們的類、模板和元資料的完整程式碼。

示例

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   template: ` <div>
      <h1>{{appTitle}}</h1>
      <div>To Tutorials Point</div>
   </div> `,
})

export class AppComponent {
   appTitle: string = 'Welcome';
}

在上面的示例中，需要注意以下幾點：

我們使用import關鍵字從angular/core模組匯入“Component”裝飾器。
然後我們使用裝飾器來定義一個元件。
該元件有一個名為“my-app”的選擇器。這只不過是我們自定義的html標籤，可以在我們的主html頁面中使用。

現在，讓我們轉到程式碼中的index.html檔案。

讓我們確保body標籤現在包含對元件中自定義標籤的引用。因此，在上述情況下，我們需要確保body標籤包含以下程式碼：

<body>
   <my-app></my-app>
</body>

輸出

現在，如果我們轉到瀏覽器並檢視輸出，我們將看到輸出按元件中的方式渲染。

列印頁面