Angular7 - Các thành phần

Phần chính của quá trình phát triển với Angular 7 được thực hiện trong các thành phần. Thành phần về cơ bản là các lớp tương tác với tệp .html của thành phần, được hiển thị trên trình duyệt. Chúng tôi đã thấy cấu trúc tệp trong một trong những chương trước của chúng tôi.

Cấu trúc tệp có thành phần ứng dụng và nó bao gồm các tệp sau:

• app.component.css
• app.component.html
• app.component.spec.ts
• app.component.ts
• app.module.ts

Và nếu bạn đã chọn định tuyến theo góc trong quá trình thiết lập dự án của mình, các tệp liên quan đến định tuyến cũng sẽ được thêm vào và các tệp như sau:

• app-routing.module.ts

Các tệp trên được tạo theo mặc định khi chúng tôi tạo dự án mới bằng lệnh angle-cli.

Nếu bạn mở ra app.module.ts tệp, nó có một số thư viện được nhập và cũng có một khai báo được gán thành phần ứng dụng như sau:

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component';

@NgModule({ 
   declarations: [ 
      AppComponent 
   ], 
   imports: [ 
      BrowserModule, 
      AppRoutingModule 
   ], 
   providers: [],
   bootstrap: [AppComponent] 
})
export class AppModule { }

Các khai báo bao gồm biến AppComponent, mà chúng tôi đã nhập. Điều này trở thành thành phần mẹ.

Bây giờ, angle-cli có một lệnh để tạo thành phần của riêng bạn. Tuy nhiên, thành phần ứng dụng được tạo theo mặc định sẽ luôn là thành phần gốc và các thành phần tiếp theo được tạo sẽ tạo thành các thành phần con.

Bây giờ chúng ta hãy chạy lệnh để tạo thành phần với dòng mã bên dưới:

ng g component new-cmp

Khi bạn chạy lệnh trên trong dòng lệnh, bạn sẽ nhận được kết quả sau:

C:\projectA7\angular7-app>ng g 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 (477 bytes)

Bây giờ, nếu chúng ta đi và kiểm tra cấu trúc tệp, chúng ta sẽ nhận được thư mục mới new-cmp được tạo trong src/app thư mục.

Các tệp sau được tạo trong thư mục new-cmp -

• new-cmp.component.css - tệp css cho thành phần mới được tạo.
• new-cmp.component.html - tệp html được tạo.
• new-cmp.component.spec.ts - điều này có thể được sử dụng để kiểm tra đơn vị.
• new-cmp.component.ts - tại đây, chúng ta có thể xác định mô-đun, thuộc tính, v.v.

Các thay đổi được thêm vào app.moduletệp .ts như sau -

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
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,
      AppRoutingModule 
   ], 
   providers: [], 
      bootstrap: [AppComponent] 
      //for bootstrap the AppComponent the main app component is given. 
}) 
export class AppModule { }

Các new-cmp.component.ts tệp được tạo như sau -,

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', // selector to be used inside .html file. 
   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() { } 
}

Nếu bạn thấy tệp new-cmp.component.ts ở trên, nó sẽ tạo một lớp mới có tên NewCmpComponent, triển khai OnInit trong đó có một phương thức khởi tạo và một phương thức gọi là ngOnInit (). ngOnInit được gọi theo mặc định khi lớp được thực thi.

Hãy để chúng tôi kiểm tra cách thức hoạt động của dòng chảy. Bây giờ, thành phần ứng dụng, được tạo theo mặc định sẽ trở thành thành phần mẹ. Bất kỳ thành phần nào được thêm vào sau đó sẽ trở thành thành phần con.

Khi chúng tôi nhấn vào url trong "http://localhost:4200/" trình duyệt, trước tiên nó thực thi tệp index.html được hiển thị bên dưới -

<html lang = "en">
 
   <head> 
      <meta charset = "utf-8"> 
      <title>Angular7App</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>

Trên đây là tệp html bình thường và chúng tôi không thấy bất kỳ thứ gì được in trên trình duyệt. Chúng ta sẽ xem xét thẻ trong phần nội dung.

<app-root></app-root>

Đây là thẻ gốc được tạo bởi Angular theo mặc định. Thẻ này có tham chiếu trongmain.ts tập tin.

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).catch(err => console.error(err));

AppModule được nhập từ ứng dụng của mô-đun mẹ chính và điều tương tự được cấp cho Mô-đun bootstrap, làm cho mô-đun tải ứng dụng.

Bây giờ chúng ta hãy xem app.module.ts tập tin -

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component';

@NgModule({ 
   declarations: [
      AppComponent, 
      NewCmpComponent 
   ],
   imports: [ 
      BrowserModule, 
      AppRoutingModule '
   ], 
   providers: [], 
   bootstrap: [AppComponent] 
})
export class AppModule { }

Đây, AppComponent là tên đã cho, tức là, biến để lưu trữ tham chiếu của app.component.tsvà điều tương tự cũng được đưa ra cho bootstrap. Bây giờ chúng ta hãy xemapp.component.ts tập tin.

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

Lõi góc được nhập và được gọi là Thành phần và cùng được sử dụng trong Bộ phân tách như:

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

Trong tham chiếu bộ khai báo tới bộ chọn, templateUrl và styleUrl được đưa ra. Bộ chọn ở đây không có gì khác ngoài thẻ được đặt trong tệp index.html mà chúng ta đã thấy ở trên.

Lớp AppComponent có một biến được gọi là title, được hiển thị trong trình duyệt. @Component sử dụng templateUrl được gọi là app.component.html như sau:

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

Nó chỉ có mã html và tiêu đề biến trong dấu ngoặc nhọn. Nó được thay thế bằng giá trị, có trongapp.component.tstập tin. Đây được gọi là ràng buộc. Chúng ta sẽ thảo luận về khái niệm ràng buộc trong chương tiếp theo.

Bây giờ chúng ta đã tạo một thành phần mới có tên là new-cmp. Điều tương tự cũng được đưa vàoapp.module.ts khi lệnh được chạy để tạo một thành phần mới.

app.module.ts có tham chiếu đến thành phần mới được tạo.

Bây giờ chúng ta hãy kiểm tra các tệp mới được tạo trong 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() { } 
}

Ở đây, chúng ta cũng phải nhập lõi. Tham chiếu của thành phần được sử dụng trong bộ khai báo.

Bộ khai báo có bộ chọn được gọi là app-new-cmp và templateUrl và styleUrl.

.Html được gọi là new-cmp.component.html như sau−

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

Như đã thấy ở trên, chúng ta có mã html, tức là thẻ p. Tệp kiểu trống vì hiện tại chúng tôi không cần bất kỳ kiểu nào. Nhưng khi chúng tôi chạy dự án, chúng tôi không thấy bất cứ điều gì liên quan đến thành phần mới được hiển thị trong trình duyệt.

Trình duyệt hiển thị màn hình sau:

Chúng tôi không thấy bất cứ điều gì liên quan đến thành phần mới được hiển thị. Thành phần mới được tạo có tệp .html với các chi tiết sau:

<p>
   new-cmp works!
<p>

Nhưng chúng tôi không nhận được như vậy trong trình duyệt. Bây giờ chúng ta hãy xem những thay đổi cần thiết để nội dung thành phần mới được hiển thị trong trình duyệt.

Bộ chọn 'app-new-cmp'được tạo cho thành phần mới từ new-cmp.component.ts như hình dưới đây -

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

Bộ chọn, tức là, app-new-cmp cần được thêm vào app.component.html, tức là phần tử chính được tạo theo mặc định như sau:

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

Khi mà <app-new-cmp></app-new-cmp> được thêm vào, tất cả những gì có trong tệp .html, tức là new-cmp.component.html của thành phần mới được tạo sẽ được hiển thị trên trình duyệt cùng với dữ liệu thành phần chính.

Hãy để chúng tôi thêm một số chi tiết khác vào thành phần mới được tạo và xem hiển thị trong trình duyệt.

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

Trong lớp, chúng tôi đã thêm một biến được gọi là newcomponent và giá trị là "Đã nhập trong thành phần mới được tạo".

Biến trên được thêm vào new-cmp.component.html tập tin như sau -

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

Bây giờ vì chúng tôi đã bao gồm <app-new-cmp></app-new-cmp>bộ chọn trong app.component.html là .html của thành phần mẹ, nội dung có trong new-cmp.component.htmltệp được hiển thị trên trình duyệt. Chúng tôi cũng sẽ thêm một số css cho thành phần mới trong tệp new-cmp.component.css như sau:

p { 
   color: blue; 
   font-size: 25px; 
}

Vì vậy, chúng tôi đã thêm màu xanh lam và kích thước phông chữ là 25px cho các thẻ p.

Màn hình sau sẽ được hiển thị trong trình duyệt -

Tương tự, chúng ta có thể tạo các thành phần và liên kết giống nhau bằng cách sử dụng bộ chọn trong app.component.html hồ sơ theo yêu cầu của chúng tôi.