Angular 6 - 元件

上一頁
下一頁

Angular 6 開發中的大部分工作都在元件中完成。元件基本上是與元件的 .html 檔案互動的類，該檔案顯示在瀏覽器上。我們在之前的章節中已經瞭解了檔案結構。檔案結構包含 app 元件，它包含以下檔案：

  • app.component.css

  • app.component.html

  • app.component.spec.ts

  • app.component.ts

  • app.module.ts

以上檔案是在我們使用 angular-cli 命令建立新專案時預設建立的。

如果您開啟 **app.module.ts** 檔案，它會匯入一些庫，並宣告將 appcomponent 分配如下：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

宣告包括我們已經匯入的 AppComponent 變數。這成為父元件。

現在，angular-cli 有一個命令可以建立您自己的元件。但是，預設建立的 app 元件將始終保持為父元件，以後建立的元件將形成子元件。

現在讓我們執行命令來建立元件。

ng generate component new-cmp

當您在命令列中執行上述命令時，您將收到以下輸出：

D:\Node\Angular6App>ng generate component new-cmp
CREATE src/app/new-cmp/new-cmp.component.html (26 bytes)
CREATE src/app/new-cmp/new-cmp.component.spec.ts (629 bytes)
CREATE src/app/new-cmp/new-cmp.component.ts (272 bytes)
CREATE src/app/new-cmp/new-cmp.component.css (0 bytes)
UPDATE src/app/app.module.ts (398 bytes)

現在，如果我們去檢查檔案結構，我們將在 src/app 資料夾下看到新建立的 new-cmp 資料夾。

在 new-cmp 資料夾中建立了以下檔案：

  • new-cmp.component.css - 建立了新元件的 css 檔案。

  • new-cmp.component.html - 建立了 html 檔案。

  • new-cmp.component.spec.ts - 這可以用於單元測試。

  • new-cmp.component.ts - 在這裡，我們可以定義模組、屬性等。

對 app.module.ts 檔案的更改如下：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
// includes the new-cmp component we created
@NgModule({
   declarations: [
      AppComponent,
      NewCmpComponent // here it is added in declarations and will behave as a child component
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent] //for bootstrap the AppComponent the main app component is given.
})

export class AppModule { }

**new-cmp.component.ts** 檔案生成如下：

import { Component, OnInit } from '@angular/core'; // here angular/core is imported .
@Component({
   // this is a declarator which starts with @ sign. The component word marked in bold needs to be the same.
   selector: 'app-new-cmp', //
   templateUrl: './new-cmp.component.html', 
   // reference to the html file created in the new component.
   styleUrls: ['./new-cmp.component.css'] // reference to the style file.
})
export class NewCmpComponent implements OnInit {
   constructor() { }
   ngOnInit() {}
}

如果您看到上面的 new-cmp.component.ts 檔案，它會建立一個名為 NewCmpComponent 的新類，該類實現 OnInit 介面，其中包含建構函式和名為 ngOnInit() 的方法。當類執行時，預設情況下會呼叫 ngOnInit。

讓我們檢查流程是如何工作的。現在，預設建立的 app 元件成為父元件。任何後來新增的元件都成為子元件。

當我們在 **https://:4200/** 瀏覽器中訪問 url 時，它首先執行如下所示的 index.html 檔案：

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>Angular 6 Application</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>
      <app-root></app-root>
   </body>
</html>

以上是普通的 html 檔案，我們沒有看到任何列印在瀏覽器上的內容。看一下 body 部分的標籤。

<app-root></app-root>

這是 Angular 預設建立的根標籤。此標籤在 **main.ts** 檔案中具有引用。

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
   enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);

AppModule 從主父模組的 app 中匯入，並將其提供給 bootstrap 模組，這使得 appmodule 載入。

現在讓我們看看 **app.module.ts** 檔案：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
@NgModule({
   declarations: [
      AppComponent,
      NewCmpComponent
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})

export class AppModule { }

這裡，AppComponent 是給定的名稱，即儲存 **app.Component.ts** 引用的變數，並將相同的變數提供給 bootstrap。現在讓我們看看 **app.component.ts** 檔案。

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 6 Project!';
}

匯入 Angular core 並將其稱為 Component，並在宣告器中使用它：

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

在宣告器的引用中，給出了選擇器、**templateUrl** 和 **styleUrl**。這裡的選擇器只不過是我們在上面看到的 index.html 檔案中放置的標籤。

AppComponent 類有一個名為 title 的變數，該變數顯示在瀏覽器中。

**@Component** 使用名為 app.component.html 的 templateUrl，內容如下：

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>

它只有 html 程式碼和花括號中的 title 變數。它將被替換為 **app.component.ts** 檔案中存在的 value。這稱為繫結。我們將在後續章節中討論繫結的概念。

現在我們已經建立了一個名為 **new-cmp** 的新元件。當執行建立新元件的命令時，它將包含在 **app.module.ts** 檔案中。

**app.module.ts** 引用了建立的新元件。

現在讓我們檢查在 new-cmp 中建立的新檔案。

new-cmp.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.component.html',
   styleUrls: ['./new-cmp.component.css']
})
export class NewCmpComponent implements OnInit {
   constructor() { }
   ngOnInit() {}
}

在這裡，我們也必須匯入 core。元件的引用在宣告器中使用。

宣告器具有名為 **app-new-cmp** 的選擇器以及 **templateUrl** 和 **styleUrl**。

名為 **new-cmp.component.html** 的 .html 檔案如下：

<p>
   new-cmp works!
</p>

如上所示，我們有 html 程式碼，即 p 標籤。樣式檔案為空，因為我們目前不需要任何樣式。但是當我們執行專案時，我們沒有看到任何與新元件在瀏覽器中顯示相關的內容。現在讓我們新增一些內容，稍後可以在瀏覽器中看到。

需要在 **app.component.html** 檔案中新增選擇器，即 **app-new-cmp**，如下所示：

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>
<app-new-cmp></app-new-cmp>

當新增 **<app-new-cmp></app-new-cmp>** 標籤時，新元件的 .html 檔案中存在的所有內容都將與父元件資料一起顯示在瀏覽器上。

讓我們看看 **new component .html** 檔案和 **new-cmp.component.ts** 檔案。

new-cmp.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.component.html',
   styleUrls: ['./new-cmp.component.css']
})
export class NewCmpComponent implements OnInit {
   newcomponent = "Entered in new component created";
   constructor() {}
   ngOnInit() { }
}

在類中，我們添加了一個名為 new component 的變數，其值為“**Entered in new component created**”。

上述變數在 **.new-cmp.component.html** 檔案中繫結如下：

<p>
   {{newcomponent}}
</p>
<p>
   new-cmp works!
</p>

現在，由於我們在 **app.component.html**（父元件的 .html）中包含了 **<app-new-cmp></app-new-cmp>** 選擇器，因此新元件 .html 檔案 (new-cmp.component.html) 中存在的內容將如下顯示在瀏覽器上：

Using Selectors Browser Output

類似地，我們可以根據我們的需求建立元件並使用 **app.component.html** 檔案中的選擇器連結它們。

列印頁面
上一頁
下一頁
廣告