{"id":154,"date":"2017-09-27T16:24:02","date_gmt":"2017-09-27T16:24:02","guid":{"rendered":"http:\/\/td_uid_74_59cbd0a25641c"},"modified":"2020-01-02T14:19:07","modified_gmt":"2020-01-02T07:19:07","slug":"bai-2-components-cua-angular-js-8","status":"publish","type":"post","link":"https:\/\/thietkewebdalat.net\/blog\/bai-2-components-cua-angular-js-8\/","title":{"rendered":"[B\u00e0i 2] Components c\u1ee7a Angular js 8"},"content":{"rendered":"

Ti\u1ebfp theo b\u00e0i 1<\/a>, h\u00f4m nay ch\u00fang ta s\u1ebd t\u00ecm hi\u1ec3u v\u1ec1 c\u00e1c th\u00e0nh ph\u1ea7n trong angular v\u1eady<\/p>\n

Component l\u00e0 g\u00ec: l\u00e0 m\u1ed9t l\u1edbp \u0111\u01b0\u1ee3c x\u00e1c \u0111\u1ecbnh cho b\u1ea5t k\u1ef3 th\u00e0nh ph\u1ea7n ho\u1eb7c \u0111i\u1ec1u khi\u1ec3n hi\u1ec3n th\u1ecb n\u00e0o tr\u00ean m\u00e0n h\u00ecnh. M\u1ed7i l\u1edbp th\u00e0nh ph\u1ea7n c\u00f3 m\u1ed9t s\u1ed1 thu\u1ed9c t\u00ednh v\u00e0 b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng ch\u00fang, ch\u00fang ta c\u00f3 th\u1ec3 thao t\u00e1c h\u00e0nh vi ho\u1eb7c giao di\u1ec7n c\u1ee7a ph\u1ea7n t\u1eed tr\u00ean m\u00e0n h\u00ecnh. V\u00ec v\u1eady, ch\u00fang ta c\u00f3 th\u1ec3 t\u1ea1o, c\u1eadp nh\u1eadt ho\u1eb7c h\u1ee7y c\u00e1c th\u00e0nh ph\u1ea7n c\u1ee7a ri\u00eang m\u00ecnh theo y\u00eau c\u1ea7u \u1edf b\u1ea5t k\u1ef3 giai \u0111o\u1ea1n n\u00e0o c\u1ee7a \u1ee9ng d\u1ee5ng. Nh\u01b0ng trong TypeScript, m\u1ed9t th\u00e0nh ph\u1ea7n v\u1ec1 c\u01a1 b\u1ea3n l\u00e0 m\u1ed9t l\u1edbp TypeScript \u0111\u01b0\u1ee3c trang tr\u00ed b\u1eb1ng m\u1ed9t tr\u00ecnh trang tr\u00ed @Component (). T\u1eeb quan \u0111i\u1ec3m HTML, m\u1ed9t th\u00e0nh ph\u1ea7n l\u00e0 th\u1ebb HTML t\u00f9y ch\u1ec9nh do ng\u01b0\u1eddi d\u00f9ng x\u00e1c \u0111\u1ecbnh c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb trong tr\u00ecnh duy\u1ec7t \u0111\u1ec3 hi\u1ec3n th\u1ecb b\u1ea5t k\u1ef3 lo\u1ea1i ph\u1ea7n t\u1eed UI n\u00e0o c\u00f9ng v\u1edbi m\u1ed9t s\u1ed1 logic nghi\u1ec7p v\u1ee5.<\/p>\n

import { Component } from '@angular\/core';  \r\n  \r\n@Component({  \r\n  selector: 'app-root',  \r\n  templateUrl: '.\/app.component.html',  \r\n  styleUrls: ['.\/app.component.css']  \r\n})  \r\nexport class AppComponent {  \r\n  title = 'Welcome to Angular 8 Learning Series...';  \r\n} \r\n\r\n<\/pre>\n
T\u1ea1i sao c\u1ea7n Ki\u1ebfn tr\u00fac d\u1ef1a tr\u00ean th\u00e0nh ph\u1ea7n? <\/strong><\/h2>\n
Theo xu h\u01b0\u1edbng hi\u1ec7n nay trong ph\u00e1t tri\u1ec3n \u1ee9ng d\u1ee5ng web, ki\u1ebfn tr\u00fac d\u1ef1a tr\u00ean th\u00e0nh ph\u1ea7n s\u1ebd \u0111\u00f3ng vai tr\u00f2 l\u00e0 ki\u1ebfn tr\u00fac c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng nh\u1ea5t trong ph\u00e1t tri\u1ec3n web trong t\u01b0\u01a1ng lai. B\u1edfi v\u00ec, v\u1edbi s\u1ef1 tr\u1ee3 gi\u00fap c\u1ee7a k\u1ef9 thu\u1eadt n\u00e0y, ch\u00fang t\u00f4i c\u00f3 th\u1ec3 gi\u1ea3m c\u1ea3 th\u1eddi gian ph\u00e1t tri\u1ec3n v\u00e0 chi ph\u00ed v\u1edbi kh\u1ed1i l\u01b0\u1ee3ng l\u1edbn trong b\u1ea5t k\u1ef3 d\u1ef1 \u00e1n ph\u00e1t tri\u1ec3n web quy m\u00f4 l\u1edbn n\u00e0o. \u0110\u00f3 l\u00e0 l\u00fd do t\u1ea1i sao c\u00e1c chuy\u00ean gia k\u1ef9 thu\u1eadt hi\u1ec7n khuy\u00ean b\u1ea1n n\u00ean th\u1ef1c hi\u1ec7n ki\u1ebfn tr\u00fac n\u00e0y trong ph\u00e1t tri\u1ec3n \u1ee9ng d\u1ee5ng d\u1ef1a tr\u00ean web. V\u00ec v\u1eady, tr\u01b0\u1edbc khi \u0111i th\u1ea3o lu\u1eadn s\u00e2u v\u1ec1 c\u00e1c th\u00e0nh ph\u1ea7n, h\u00e3y th\u1ea3o lu\u1eadn v\u1ec1 l\u00fd do t\u1ea1i sao ki\u1ebfn tr\u00fac d\u1ef1a tr\u00ean th\u00e0nh ph\u1ea7n n\u00e0y l\u00e0 c\u1ea7n thi\u1ebft cho s\u1ef1 ph\u00e1t tri\u1ec3n d\u1ef1a tr\u00ean web.<\/p>\n
    \n
  • Reusability: <\/strong>C\u00e1c frameworks d\u1ef1a tr\u00ean th\u00e0nh ph\u1ea7n h\u1eefu \u00edch h\u01a1n nhi\u1ec1u do c\u00e1c t\u00ednh n\u0103ng t\u00e1i s\u1eed d\u1ee5ng c\u1ee7a n\u00f3 trong qu\u00e1 tr\u00ecnh ph\u00e1t tri\u1ec3n. Trong frameworks n\u00e0y, c\u00e1c th\u00e0nh ph\u1ea7n l\u00e0 c\u00e1c \u0111\u01a1n v\u1ecb chi ti\u1ebft nh\u1ea5t trong qu\u00e1 tr\u00ecnh ph\u00e1t tri\u1ec3n v\u00e0 vi\u1ec7c ph\u00e1t tri\u1ec3n v\u1edbi c\u00e1c th\u00e0nh ph\u1ea7n cho ph\u00e9p ch\u00fang ta cung c\u1ea5p kh\u1ea3 n\u0103ng t\u00e1i s\u1eed d\u1ee5ng trong c\u00e1c chu k\u1ef3 ph\u00e1t tri\u1ec3n trong t\u01b0\u01a1ng lai. V\u00ec v\u1eady, n\u1ebfu ch\u00fang ta ph\u00e1t tri\u1ec3n m\u1ed9t \u1ee9ng d\u1ee5ng theo \u0111\u1ecbnh d\u1ea1ng d\u1ef1a tr\u00ean th\u00e0nh ph\u1ea7n, th\u00ec ch\u00fang ta c\u00f3 th\u1ec3 trao \u0111\u1ed5i c\u00e1c th\u00e0nh ph\u1ea7n t\u1ed1t nh\u1ea5t trong v\u00e0 ngo\u00e0i. M\u1ed9t c\u00e1ch ti\u1ebfp c\u1eadn ki\u1ebfn tr\u00fac d\u1ef1a tr\u00ean th\u00e0nh ph\u1ea7n cho ph\u00e9p \u1ee9ng d\u1ee5ng c\u1ee7a b\u1ea1n c\u1eadp nh\u1eadt theo th\u1eddi gian thay v\u00ec x\u00e2y d\u1ef1ng l\u1ea1i t\u1eeb \u0111\u1ea7u.<\/li>\n
  • Increase Development Speed : <\/strong>Ph\u00e1t tri\u1ec3n d\u1ef1a tr\u00ean th\u00e0nh ph\u1ea7n lu\u00f4n h\u1ed7 tr\u1ee3 ph\u00e1t tri\u1ec3n d\u1ef1a tr\u00ean ph\u01b0\u01a1ng ph\u00e1p nhanh. C\u00e1c th\u00e0nh ph\u1ea7n c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c l\u01b0u tr\u1eef trong m\u1ed9t th\u01b0 vi\u1ec7n m\u00e0 nh\u00f3m c\u00f3 th\u1ec3 truy c\u1eadp, t\u00edch h\u1ee3p v\u00e0 s\u1eeda \u0111\u1ed5i trong su\u1ed1t qu\u00e1 tr\u00ecnh ph\u00e1t tri\u1ec3n. Theo ngh\u0129a r\u1ed9ng, m\u1ecdi nh\u00e0 ph\u00e1t tri\u1ec3n \u0111\u1ec1u c\u00f3 c\u00e1c k\u1ef9 n\u0103ng chuy\u00ean bi\u1ec7t. V\u00ed d\u1ee5, m\u1ed9t ng\u01b0\u1eddi n\u00e0o \u0111\u00f3 c\u00f3 th\u1ec3 l\u00e0 m\u1ed9t chuy\u00ean gia v\u1ec1 JavaScript, m\u1ed9t ng\u01b0\u1eddi kh\u00e1c v\u1ec1 CSS, v.v. V\u1edbi khung n\u00e0y, m\u1ecdi nh\u00e0 ph\u00e1t tri\u1ec3n chuy\u00ean ng\u00e0nh c\u00f3 th\u1ec3 \u0111\u00f3ng g\u00f3p \u0111\u1ec3 ph\u00e1t tri\u1ec3n m\u1ed9t th\u00e0nh ph\u1ea7n th\u00edch h\u1ee3p.<\/li>\n
  • Easy Integration: <\/strong>Ch\u00fang ta c\u00f3 th\u1ec3 ph\u00e1t tri\u1ec3n kho l\u01b0u tr\u1eef th\u01b0 vi\u1ec7n li\u00ean quan \u0111\u1ebfn th\u00e0nh ph\u1ea7n. Kho l\u01b0u tr\u1eef th\u00e0nh ph\u1ea7n n\u00e0y c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng l\u00e0m kho l\u01b0u tr\u1eef m\u00e3 t\u1eadp trung cho s\u1ef1 ph\u00e1t tri\u1ec3n hi\u1ec7n t\u1ea1i c\u0169ng nh\u01b0 s\u1ef1 ph\u00e1t tri\u1ec3n m\u1edbi . L\u00e0 kho l\u01b0u tr\u1eef m\u00e3 t\u1eadp trung kh\u00e1c, ch\u00fang t\u00f4i c\u00f3 th\u1ec3 duy tr\u00ec th\u01b0 vi\u1ec7n n\u00e0y trong b\u1ea5t k\u1ef3 ki\u1ec3m so\u00e1t ngu\u1ed3n n\u00e0o. Theo c\u00e1ch n\u00e0y, ch\u00fang ta c\u00f3 th\u1ec3 truy c\u1eadp v\u00e0o c\u00e1c kho l\u01b0u tr\u1eef \u0111\u00f3 v\u00e0 c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c c\u1eadp nh\u1eadt v\u1edbi c\u00e1c t\u00ednh n\u0103ng ho\u1eb7c ch\u1ee9c n\u0103ng m\u1edbi theo y\u00eau c\u1ea7u m\u1edbi v\u00e0 \u0111\u1ec7 tr\u00ecnh ph\u00ea duy\u1ec7t th\u00f4ng qua quy tr\u00ecnh ri\u00eang c\u1ee7a h\u1ecd.<\/li>\n
  • Optimize Requirement and Design: <\/strong>Ch\u00fang ta c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng th\u01b0 vi\u1ec7n th\u00e0nh ph\u1ea7n l\u00e0m ngu\u1ed3n tham chi\u1ebfu th\u00e0nh ph\u1ea7n UI,v\u00ec v\u1eady s\u1eed d\u1ee5ng c\u00e1c th\u00e0nh vi\u00ean nh\u00f3m ph\u00e2n t\u00edch ngu\u1ed3n n\u00e0y nh\u01b0 ng\u01b0\u1eddi qu\u1ea3n l\u00fd s\u1ea3n ph\u1ea9m, ph\u00e2n t\u00edch kinh doanh ho\u1eb7c l\u00e3nh \u0111\u1ea1o k\u1ef9 thu\u1eadt c\u1ea7n d\u00e0nh \u00edt th\u1eddi gian h\u01a1n \u0111\u1ec3 ho\u00e0n thi\u1ec7n thi\u1ebft k\u1ebf UI cho c\u00e1c y\u00eau c\u1ea7u m\u1edbi c\u1ee7a h\u1ecd. B\u1edfi v\u00ec h\u1ecd \u0111\u00e3 c\u00f3 m\u1ed9t lo\u1ea1t c\u00e1c th\u00e0nh ph\u1ea7n \u0111\u01b0\u1ee3c th\u1eed nghi\u1ec7m \u0111\u1ea7y \u0111\u1ee7 v\u1edbi ch\u1ee9c n\u0103ng \u0111\u1ea7y \u0111\u1ee7. Ch\u1ec9 c\u1ea7n h\u1ecd quy\u1ebft \u0111\u1ecbnh qu\u00e1 tr\u00ecnh v\u1ec1 c\u00e1c \u0111i\u1ec3m n\u00e2ng cao bao g\u1ed3m logic kinh doanh m\u1edbi m\u00e0 th\u00f4i. Theo c\u00e1ch n\u00e0y, frameworks d\u1ef1a tr\u00ean th\u00e0nh ph\u1ea7n n\u00e0y cung c\u1ea5p t\u1ed1c \u0111\u1ed9 nhanh h\u01a1n cho v\u00f2ng \u0111\u1eddi c\u1ee7a qu\u00e1 tr\u00ecnh ph\u00e1t tri\u1ec3n.<\/li>\n
  • Lower Maintenance Costs: <\/strong>Do frameworks d\u1ef1a tr\u00ean th\u00e0nh ph\u1ea7n h\u1ed7 tr\u1ee3 kh\u1ea3 n\u0103ng s\u1eed d\u1ee5ng l\u1ea1i, n\u00ean frameworks n\u00e0y gi\u1ea3m y\u00eau c\u1ea7u c\u1ee7a t\u1ed5ng s\u1ed1 nh\u00e0 ph\u00e1t tri\u1ec3n khi ch\u00fang ta mu\u1ed1n t\u1ea1o m\u1ed9t \u1ee9ng d\u1ee5ng m\u1edbi. C\u00e1c th\u00e0nh ph\u1ea7n d\u1ef1a tr\u00ean logic th\u01b0\u1eddng kh\u00f4ng c\u00f3 ng\u1eef c\u1ea3nh v\u00e0 c\u00e1c th\u00e0nh ph\u1ea7n d\u1ef1a tr\u00ean giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng lu\u00f4n \u0111i k\u00e8m v\u1edbi UX v\u00e0 UI . V\u00ec v\u1eady, ch\u00fang ta gi\u1edd \u0111\u00e2y c\u00f3 th\u1ec3 t\u1eadp trung v\u00e0o vi\u1ec7c t\u00edch h\u1ee3p c\u00e1c th\u00e0nh ph\u1ea7n \u0111\u00f3 trong \u1ee9ng d\u1ee5ng v\u00e0 c\u00e1ch thi\u1ebft l\u1eadp k\u1ebft n\u1ed1i gi\u1eefa c\u00e1c lo\u1ea1i th\u00e0nh ph\u1ea7n n\u00e0y. Ngo\u00e0i ra, c\u00e1c thu\u1ed9c t\u00ednh h\u1ec7 th\u1ed1ng kh\u00e1c nh\u01b0 b\u1ea3o m\u1eadt, hi\u1ec7u su\u1ea5t, kh\u1ea3 n\u0103ng b\u1ea3o tr\u00ec, \u0111\u1ed9 tin c\u1eady v\u00e0 kh\u1ea3 n\u0103ng m\u1edf r\u1ed9ng, (th\u01b0\u1eddng \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 c\u00e1c y\u00eau c\u1ea7u phi ch\u1ee9c n\u0103ng ho\u1eb7c NFR) c\u0169ng c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c ki\u1ec3m tra.<\/li>\n<\/ul>\n
    @Component Metadata:<\/h2>\n
    Trong Angular, khi ch\u00fang ta mu\u1ed1n t\u1ea1o b\u1ea5t k\u1ef3 th\u00e0nh ph\u1ea7n m\u1edbi n\u00e0o, ch\u00fang ta c\u1ea7n s\u1eed d\u1ee5ng tr @Component. @Component v\u1ec1 c\u01a1 b\u1ea3nl\u00e0 m\u1ed9t l\u1edbp TypeScript l\u00e0m \u0111\u1ed1i t\u01b0\u1ee3ng th\u00e0nh ph\u1ea7n. Tr\u00ean th\u1ef1c t\u1ebf, @Component l\u00e0 m\u1ed9t h\u00e0m c\u00f3 c\u00e1c lo\u1ea1i tham s\u1ed1 kh\u00e1c nhau. Trong\u00a0 @Component, ch\u00fang ta c\u00f3 th\u1ec3 \u0111\u1eb7t c\u00e1c gi\u00e1 tr\u1ecb c\u1ee7a c\u00e1c thu\u1ed9c t\u00ednh kh\u00e1c nhau \u0111\u1ec3 ho\u00e0n thi\u1ec7n ho\u1eb7c thao t\u00e1c h\u00e0nh vi c\u1ee7a c\u00e1c th\u00e0nh ph\u1ea7n. C\u00e1c thu\u1ed9c t\u00ednh \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng ph\u1ed5 bi\u1ebfn nh\u1ea5t c\u1ee7a @Component nh\u01b0 sau:<\/p>\n
      \n
    • selector<\/strong> : M\u1ed9t th\u00e0nh ph\u1ea7n c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng b\u1edfi bi\u1ec3u th\u1ee9c ch\u1ecdn.<\/li>\n
    • template:<\/strong> l\u00e0 m\u1ed9t ph\u1ea7n c\u1ee7a th\u00e0nh ph\u1ea7n \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb trong tr\u00ecnh duy\u1ec7t.<\/li>\n
    • templayeUrl: l<\/strong>\u00e0 m\u1ed9t c\u00e1ch kh\u00e1c \u0111\u1ec3 hi\u1ec3n th\u1ecb c\u00e1c th\u1ebb HTML trong tr\u00ecnh duy\u1ec7t. Thu\u1ed9c t\u00ednh n\u00e0y lu\u00f4n ch\u1ea5p nh\u1eadn t\u00ean t\u1ec7p HTML v\u1edbi \u0111\u01b0\u1eddng d\u1eabn t\u1ec7p li\u00ean quan. \u0110\u00f4i khi n\u00f3 \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 m\u1eabu b\u00ean ngo\u00e0i. Vi\u1ec7c s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh n\u00e0y t\u1ed1t h\u01a1n nhi\u1ec1u khi ch\u00fang t\u00f4i mu\u1ed1n thi\u1ebft k\u1ebf b\u1ea5t k\u1ef3 giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng ph\u1ee9c t\u1ea1p n\u00e0o trong th\u00e0nh ph\u1ea7n.<\/li>\n
    • moduleId: <\/strong>\u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 gi\u1ea3i quy\u1ebft \u0111\u01b0\u1eddng d\u1eabn li\u00ean quan c\u1ee7a templaye Url<\/strong> ho\u1eb7c URL ki\u1ec3u cho c\u00e1c \u0111\u1ed1i t\u01b0\u1ee3ng th\u00e0nh ph\u1ea7n. N\u00f3 ch\u1ee9a Id c\u1ee7a c\u00e1c m\u00f4-\u0111un li\u00ean quan trong \u0111\u00f3 th\u00e0nh ph\u1ea7n \u0111\u01b0\u1ee3c \u0111\u00ednh k\u00e8m ho\u1eb7c \u0111\u01b0\u1ee3c g\u1eafn th\u1ebb.<\/li>\n
    • styles \/ stylesUrls:<\/strong> cung c\u1ea5p c\u00e1c file css ho\u1eb7c c\u00e1c \u0111\u01b0\u1eddng d\u1eabn ch\u1ee9a file css.<\/li>\n
    • providers<\/strong> : Trong \u1ee9ng d\u1ee5ng th\u1ef1c t\u1ebf, ch\u00fang ta c\u1ea7n s\u1eed d\u1ee5ng ho\u1eb7c ti\u00eam c\u00e1c lo\u1ea1i d\u1ecbch v\u1ee5 t\u00f9y ch\u1ec9nh kh\u00e1c nhau trong th\u00e0nh ph\u1ea7n \u0111\u1ec3 tri\u1ec3n khai logic nghi\u1ec7p v\u1ee5 cho th\u00e0nh ph\u1ea7n. \u0110\u1ec3 s\u1eed d\u1ee5ng b\u1ea5t k\u1ef3 d\u1ecbch v\u1ee5 n\u00e0o do ng\u01b0\u1eddi d\u00f9ng \u0111\u1ecbnh ngh\u0129a trong th\u00e0nh ph\u1ea7n, ch\u00fang t\u00f4i c\u1ea7n cung c\u1ea5p phi\u00ean b\u1ea3n d\u1ecbch v\u1ee5 trong nh\u00e0 cung c\u1ea5p. V\u1ec1 c\u01a1 b\u1ea3n, thu\u1ed9c t\u00ednh nh\u00e0 cung c\u1ea5p lu\u00f4n \u0111\u01b0\u1ee3c cho ph\u00e9p gi\u00e1 tr\u1ecb ki\u1ec3u m\u1ea3ng. \u0110\u1ec3 ch\u00fang ta c\u00f3 th\u1ec3 x\u00e1c \u0111\u1ecbnh nhi\u1ec1u t\u00ean \u0111\u1ed1i t\u01b0\u1ee3ng d\u1ecbch v\u1ee5 c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c cung c\u1ea5p b\u1eb1ng c\u00e1ch ph\u00e2n t\u00e1ch d\u1ea5u ph\u1ea9y trong thu\u1ed9c t\u00ednh n\u00e0y t\u1ea1i m\u1ed9t th\u1eddi \u0111i\u1ec3m.<\/li>\n<\/ul>\n
      import { Component } from '@angular\/core';  \r\n  \r\n@Component({  \r\n  selector: 'app-root',  \r\n  template: 'Welcome to Angular 8 Learning Series...'  \r\n})  \r\nexport class AppComponent {  \r\n}  \r\n<\/pre>\n
      B\u00e2y gi\u1edd, trong v\u00ed d\u1ee5 d\u01b0\u1edbi \u0111\u00e2y, ch\u00fang ta s\u1ebd tr\u00ecnh b\u00e0y c\u00e1ch s\u1eed d\u1ee5ng c\u00e1c thu\u1ed9c t\u00ednh trang tr\u00ed @Component kh\u00e1c nh\u01b0 templateUrls:<\/p>\n
      import { Component } from '@angular\/core';  \r\n  \r\n@Component({  \r\n  moduleId: module.id,  \r\n  selector: 'app-root',  \r\n  templateUrl: '.\/app.component.html'  \r\n})  \r\nexport class AppComponent {  \r\n  title = 'Welcome to Angular 8 Learning Series...';  \r\n}  \r\n<\/pre>\n
      V\u00ec v\u1eady, trong v\u00ed d\u1ee5 tr\u00ean, ch\u00fang t\u00f4i s\u1ebd t\u00e1ch t\u1ec7p HTML \u0111\u1ec3 l\u01b0u tr\u1eef ph\u1ea7n HTML li\u00ean quan \u0111\u1ebfn c\u00e1c th\u00e0nh ph\u1ea7n. Theo v\u00ed d\u1ee5 tr\u00ean, ch\u00fang ta c\u1ea7n \u0111\u1eb7t c\u1ea3 t\u1ec7p TypeScript v\u00e0 t\u1ec7p HTML v\u00e0o c\u00f9ng m\u1ed9t v\u1ecb tr\u00ed. N\u1ebfu ch\u00fang ta mu\u1ed1n \u0111\u1eb7t HTML v\u00e0o m\u1ed9t th\u01b0 m\u1ee5c ri\u00eang, th\u00ec ch\u00fang ta c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng t\u1ec7p \u0111\u00f3 trong tr\u00ecnh trang tr\u00ed th\u00e0nh ph\u1ea7n b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng \u0111\u01b0\u1eddng d\u1eabn t\u1ec7p t\u01b0\u01a1ng \u0111\u1ed1i.<\/p>\n
      V\u00f2ng \u0111\u1eddi c\u1ee7a Component:<\/h2>\n
        \n
      • ngOnChanges<\/strong> : S\u1ef1 ki\u1ec7n n\u00e0y th\u1ef1c thi m\u1ed7i khi thay \u0111\u1ed5i gi\u00e1 tr\u1ecb c\u1ee7a \u0111i\u1ec1u khi\u1ec3n \u0111\u1ea7u v\u00e0o trong th\u00e0nh ph\u1ea7n. S\u1ef1 ki\u1ec7n n\u00e0y k\u00edch ho\u1ea1t \u0111\u1ea7u ti\u00ean khi gi\u00e1 tr\u1ecb c\u1ee7a m\u1ed9t t\u00e0i s\u1ea3n r\u00e0ng bu\u1ed9c \u0111\u00e3 \u0111\u01b0\u1ee3c thay \u0111\u1ed5i.<\/li>\n
      • ngOnInit<\/strong> : S\u1ef1 ki\u1ec7n n\u00e0y \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n t\u1ea1i th\u1eddi \u0111i\u1ec3m kh\u1edfi t\u1ea1o Th\u00e0nh ph\u1ea7n. S\u1ef1 ki\u1ec7n n\u00e0y ch\u1ec9 \u0111\u01b0\u1ee3c g\u1ecdi m\u1ed9t l\u1ea7n, ngay sau c\u00e1c s\u1ef1 ki\u1ec7n ngOnChanges (). S\u1ef1 ki\u1ec7n n\u00e0y ch\u1ee7 y\u1ebfu \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 kh\u1edfi t\u1ea1o d\u1eef li\u1ec7u trong m\u1ed9t th\u00e0nh ph\u1ea7n.<\/li>\n
      • ngDoCheck<\/strong> :S\u1ef1 ki\u1ec7n n\u00e0y \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n m\u1ed7i khi c\u00e1c thu\u1ed9c t\u00ednh \u0111\u1ea7u v\u00e0o c\u1ee7a m\u1ed9t th\u00e0nh ph\u1ea7n \u0111\u01b0\u1ee3c ki\u1ec3m tra. Ch\u00fang ta c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng ph\u01b0\u01a1ng ph\u00e1p v\u00f2ng \u0111\u1eddi n\u00e0y \u0111\u1ec3 th\u1ef1c hi\u1ec7n ki\u1ec3m tra c\u00e1c gi\u00e1 tr\u1ecb \u0111\u1ea7u v\u00e0o theo ki\u1ec3m tra logic c\u1ee7a ch\u00ednh ch\u00fang ta.<\/li>\n
      • ngAfterContentInit<\/strong> : Ph\u01b0\u01a1ng ph\u00e1p v\u00f2ng \u0111\u1eddi n\u00e0y \u0111\u01b0\u1ee3c th\u1ef1c thi khi Angular th\u1ef1c hi\u1ec7n b\u1ea5t k\u1ef3 ph\u00e9p chi\u1ebfu n\u1ed9i dung n\u00e0o trong c\u00e1c khung nh\u00ecn th\u00e0nh ph\u1ea7n. Ph\u01b0\u01a1ng th\u1ee9c n\u00e0y ch\u1ec9 th\u1ef1c hi\u1ec7n m\u1ed9t l\u1ea7n khi t\u1ea5t c\u1ea3 c\u00e1c r\u00e0ng bu\u1ed9c c\u1ee7a th\u00e0nh ph\u1ea7n c\u1ea7n \u0111\u01b0\u1ee3c ki\u1ec3m tra l\u1ea7n \u0111\u1ea7u ti\u00ean. S\u1ef1 ki\u1ec7n n\u00e0y th\u1ef1c thi ngay sau ph\u01b0\u01a1ng th\u1ee9c ngDoCheck ().<\/li>\n
      • ngAfterContentChecked<\/strong> : Ph\u01b0\u01a1ng ph\u00e1p m\u00f3c v\u00f2ng \u0111\u1eddi n\u00e0y th\u1ef1c thi m\u1ed7i khi n\u1ed9i dung c\u1ee7a th\u00e0nh ph\u1ea7n \u0111\u01b0\u1ee3c ki\u1ec3m tra b\u1edfi c\u01a1 ch\u1ebf ph\u00e1t hi\u1ec7n thay \u0111\u1ed5i c\u1ee7a Angular. Ph\u01b0\u01a1ng th\u1ee9c n\u00e0y \u0111\u01b0\u1ee3c g\u1ecdi sau ph\u01b0\u01a1ng th\u1ee9c ngAfterContentInit (). Ph\u01b0\u01a1ng th\u1ee9c n\u00e0y c\u0169ng c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c th\u1ef1c thi tr\u00ean m\u1ed7i l\u1ea7n th\u1ef1c hi\u1ec7n s\u1ef1 ki\u1ec7n ngDoCheck ().<\/li>\n
      • ngAfterViewInit<\/strong> : Ph\u01b0\u01a1ng th\u1ee9c v\u00f2ng \u0111\u1eddi n\u00e0y th\u1ef1c thi khi th\u00e0nh ph\u1ea7n ho\u00e0n th\u00e0nh hi\u1ec3n th\u1ecb to\u00e0n b\u1ed9 khung nh\u00ecn c\u1ee7a n\u00f3. Ph\u01b0\u01a1ng ph\u00e1p v\u00f2ng \u0111\u1eddi n\u00e0y \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 kh\u1edfi t\u1ea1o ch\u1ebf \u0111\u1ed9 xem th\u00e0nh ph\u1ea7n v\u00e0 c\u00e1c khung nh\u00ecn con. N\u00f3 ch\u1ec9 \u0111\u01b0\u1ee3c g\u1ecdi m\u1ed9t l\u1ea7n, sau ngAfterContentChecked (). Ph\u01b0\u01a1ng ph\u00e1p m\u00f3c v\u00f2ng \u0111\u1eddi n\u00e0y ch\u1ec9 \u00e1p d\u1ee5ng cho c\u00e1c th\u00e0nh ph\u1ea7n.<\/li>\n
      • ngAfterViewChecked<\/strong> : Ph\u01b0\u01a1ng th\u1ee9c n\u00e0y lu\u00f4n \u0111\u01b0\u1ee3c th\u1ef1c thi sau ph\u01b0\u01a1ng th\u1ee9c ngAterViewInit (). V\u1ec1 c\u01a1 b\u1ea3n, ph\u01b0\u01a1ng ph\u00e1p v\u00f2ng \u0111\u1eddi n\u00e0y \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n khi thu\u1eadt to\u00e1n ph\u00e1t hi\u1ec7n thay \u0111\u1ed5i c\u1ee7a th\u00e0nh ph\u1ea7n g\u00f3c x\u1ea3y ra. Ph\u01b0\u01a1ng th\u1ee9c n\u00e0y t\u1ef1 \u0111\u1ed9ng th\u1ef1c hi\u1ec7n m\u1ecdi th\u1eddi gian th\u1ef1c hi\u1ec7n c\u1ee7a ngAfterContentChecked ().<\/li>\n
      • ngOnDestroy<\/strong> : Ph\u01b0\u01a1ng th\u1ee9c n\u00e0y s\u1ebd \u0111\u01b0\u1ee3c th\u1ef1c thi khi ch\u00fang ta mu\u1ed1n ph\u00e1 h\u1ee7y c\u00e1c th\u00e0nh ph\u1ea7n Angular. Ph\u01b0\u01a1ng ph\u00e1p n\u00e0y r\u1ea5t h\u1eefu \u00edch cho vi\u1ec7c h\u1ee7y \u0111\u0103ng k\u00fd quan s\u00e1t v\u00e0 t\u00e1ch c\u00e1c tr\u00ecnh x\u1eed l\u00fd s\u1ef1 ki\u1ec7n \u0111\u1ec3 tr\u00e1nh r\u00f2 r\u1ec9 b\u1ed9 nh\u1edb. N\u00f3 \u0111\u01b0\u1ee3c g\u1ecdi ngay tr\u01b0\u1edbc khi th\u1ec3 hi\u1ec7n c\u1ee7a th\u00e0nh ph\u1ea7n b\u1ecb ph\u00e1 h\u1ee7y. Ph\u01b0\u01a1ng th\u1ee9c n\u00e0y ch\u1ec9 \u0111\u01b0\u1ee3c g\u1ecdi m\u1ed9t l\u1ea7n, ngay tr\u01b0\u1edbc khi th\u00e0nh ph\u1ea7n \u0111\u01b0\u1ee3c x\u00f3a kh\u1ecfi DOM.<\/li>\n<\/ul>\n
        \u0110\u00e2y l\u00e0 t\u1ea5t c\u1ea3 n\u1ed9i dung c\u1ee7a component,b\u00e0i ti\u1ebfp theo s\u1ebd l\u00e0 c\u00e1c v\u00ed d\u1ee5 c\u1ee7a component nh\u00e9.<\/p>\n
        B\u00e0i n\u00e0y h\u01a1i l\u00fd thuy\u1ebft m\u1ed9t t\u00ed m\u1ecdi ng\u01b0\u1eddi ch\u1ecbu kh\u00f3 \u0111\u1ecdc, n\u1ed9i dung n\u00e0y m\u00ecnh c\u00f3 tham kh\u1ea3o m\u1ed9t s\u1ed1 website n\u01b0\u1edbc ngo\u00e0i \u0111\u1ec3 vi\u1ebft. C\u1ea3m \u01a1n c\u00e1c b\u1ea1n \u0111\u00e3 \u0111\u1ecdc<\/p>\n","protected":false},"excerpt":{"rendered":"
        Ti\u1ebfp theo b\u00e0i 1, h\u00f4m nay ch\u00fang ta s\u1ebd t\u00ecm hi\u1ec3u v\u1ec1 c\u00e1c th\u00e0nh ph\u1ea7n trong angular v\u1eady Component l\u00e0 g\u00ec: l\u00e0 m\u1ed9t l\u1edbp \u0111\u01b0\u1ee3c x\u00e1c \u0111\u1ecbnh cho b\u1ea5t k\u1ef3 th\u00e0nh ph\u1ea7n ho\u1eb7c \u0111i\u1ec1u khi\u1ec3n hi\u1ec3n th\u1ecb n\u00e0o tr\u00ean m\u00e0n h\u00ecnh. M\u1ed7i l\u1edbp th\u00e0nh ph\u1ea7n c\u00f3 m\u1ed9t s\u1ed1 thu\u1ed9c t\u00ednh v\u00e0 b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng […]<\/p>\n","protected":false},"author":1,"featured_media":318,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"amp_status":"","footnotes":""},"categories":[33,39],"tags":[115,116],"class_list":{"0":"post-154","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-node-js-angular-js","8":"category-angular-js","9":"tag-huong-dan-hoc-angular-js","10":"tag-thanh-phan-trong-angular-js"},"_links":{"self":[{"href":"https:\/\/thietkewebdalat.net\/blog\/wp-json\/wp\/v2\/posts\/154","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thietkewebdalat.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thietkewebdalat.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thietkewebdalat.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thietkewebdalat.net\/blog\/wp-json\/wp\/v2\/comments?post=154"}],"version-history":[{"count":6,"href":"https:\/\/thietkewebdalat.net\/blog\/wp-json\/wp\/v2\/posts\/154\/revisions"}],"predecessor-version":[{"id":319,"href":"https:\/\/thietkewebdalat.net\/blog\/wp-json\/wp\/v2\/posts\/154\/revisions\/319"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thietkewebdalat.net\/blog\/wp-json\/wp\/v2\/media\/318"}],"wp:attachment":[{"href":"https:\/\/thietkewebdalat.net\/blog\/wp-json\/wp\/v2\/media?parent=154"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thietkewebdalat.net\/blog\/wp-json\/wp\/v2\/categories?post=154"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thietkewebdalat.net\/blog\/wp-json\/wp\/v2\/tags?post=154"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}