Angular 4 - 元件

上一頁
下一頁

Angular 4 開發的主要部分是在元件中完成的。元件基本上是與元件的 .html 檔案互動的類，該檔案顯示在瀏覽器上。我們已經在之前的章節中看到了檔案結構。檔案結構包含應用程式元件，它包含以下檔案：

  • 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 有一個命令來建立您自己的元件。但是，預設建立的應用程式元件將始終保持為父元件，以後建立的元件將構成子元件。

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

ng g component new-cmp

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

C:\projectA4\Angular 4-app>ng g component new-cmp
installing component
   create src\app\new-cmp\new-cmp.component.css
   create src\app\new-cmp\new-cmp.component.html
   create src\app\new-cmp\new-cmp.component.spec.ts
   create src\app\new-cmp\new-cmp.component.ts
   update src\app\app.module.ts

現在，如果我們去檢查檔案結構，我們會發現 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。

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

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>Angular 4App</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 從主父模組的應用程式匯入，並將其提供給引導模組，這使得 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 4 Project!';
}

匯入 Angular 核心並將其稱為 Component，並在 Declarator 中使用它，如下所示：

@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() {}
}

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

宣告器具有名為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 檔案中存在的所有內容都將與父元件資料一起顯示在瀏覽器上。

讓我們看看新元件.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 的變數，其值為“已進入建立的新元件”。

上述變數在.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 檔案中的選擇器連結相同的元件。

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