Angular 6 - Các thành phần

Phần chính của quá trình phát triển với Angular 6 đượ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

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 { AppComponent } from './app.component';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule
   ],
   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.

ng generate 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:

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)

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 thư mục src / app.

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 tệp app.module.ts như sau:

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

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', //
   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 ra một lớp mới có tên là NewCmpComponent, lớp này sẽ triển khai OnInit.In, có một hàm 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 -

<!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>

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. Hãy xem 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);

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.

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 { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
@NgModule({
   declarations: [
      AppComponent,
      NewCmpComponent
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})

export class AppModule { }

Ở đây, AppComponent là tên được cung cấp, 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 6 Project!';
}

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 đến bộ chọn, templateUrl và styleUrlđược tặng. 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.

Các @Component sử dụng templateUrl có tên 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 một 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. Bây giờ chúng ta hãy thêm một cái gì đó và điều tương tự có thể được nhìn thấy trong trình duyệt sau.

Bộ chọn, tức là, app-new-cmp cần được thêm vào app.component .html tập tin 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-cmp></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 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 xem new component .html tập tin và new-cmp.component.ts tập tin.

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à thành phần mới và giá trị là "Entered in new component created".

Biến trên được ràng buộc trong .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 tệp .html của thành phần mới (new-cmp.component.html) được hiển thị trên trình duyệt như sau:

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.

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved