Trong bài viết này mình xin phép chia sẻ đôi chút về Content Projection trong Angular.
Content projection cho phép bạn có thế chèn một ảnh của DOM trong component của bạn. Nói đơn giản thì, bạn nếu bạn muốn chèn các phần tử HTML hoặc các component vào một component, để thực hiện việc này thì bạn cần sử dụng đến content projection. Trong Angular thì bạn có thể sử sụng < ng-content></ng-content>.
Chúng ta có một component GreetComponent sau
1 2 3 4 5 6 7 8 9 | <span class="token keyword">import</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@angular/core'</span><span class="token punctuation">;</span> @<span class="token function">Component</span><span class="token punctuation">(</span><span class="token punctuation">{</span> selector<span class="token punctuation">:</span> <span class="token string">'greet'</span><span class="token punctuation">,</span> template<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`{{message}}`</span></span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">GreetComponent</span> <span class="token punctuation">{</span> message<span class="token punctuation">:</span> <span class="token builtin">string</span> <span class="token operator">=</span> <span class="token string">"Hello There !"</span> <span class="token punctuation">}</span> |
Bây giờ nếu chúng ta muốn sử dụng GreetComponent trong một component khác và in ra một thông điệp chòa mừng thì chúng ta sẽ sử dụng @Input . Theo các này thì một GreetComponent được sửa đổi giống như sau:
1 2 3 4 5 6 7 8 9 10 | <span class="token keyword">import</span> <span class="token punctuation">{</span> Component<span class="token punctuation">,</span> Input <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@angular/core'</span><span class="token punctuation">;</span> @<span class="token function">Component</span><span class="token punctuation">(</span><span class="token punctuation">{</span> selector<span class="token punctuation">:</span> <span class="token string">'greet'</span><span class="token punctuation">,</span> template<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`{{message}}`</span></span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">GreetComponent</span> <span class="token punctuation">{</span> @<span class="token function">Input</span><span class="token punctuation">(</span><span class="token punctuation">)</span> message<span class="token punctuation">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
@Input có thể giúp chúng ta truyền vào một chuỗi đơn giản dễ dàng, nhưng với các loại dữ liệu khác thì sao?? Ví dụ:
- Inner HTML
- HTML Elements
- Styled HTML
- Another Component, etc.
Khi này chúng ta hãy nghĩ ngay đến <ng-content></ng-content> và ta có đoạn code sửa đổi như sau:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <span class="token keyword">import</span> <span class="token punctuation">{</span> Component<span class="token punctuation">,</span> Input <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@angular/core'</span><span class="token punctuation">;</span> @<span class="token function">Component</span><span class="token punctuation">(</span><span class="token punctuation">{</span> selector<span class="token punctuation">:</span> <span class="token string">'greet'</span><span class="token punctuation">,</span> template<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">` <div class="container"> <ng-content></ng-content> </div> `</span></span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">GreetComponent</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> |
Bây giờ chúng ta hãy tham chiếu GreetComponent ở AppComponent nhé:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <span class="token keyword">import</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@angular/core'</span><span class="token punctuation">;</span> @<span class="token function">Component</span><span class="token punctuation">(</span><span class="token punctuation">{</span> selector<span class="token punctuation">:</span> <span class="token string">'app-root'</span><span class="token punctuation">,</span> template<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">` <div> <greet> <h3>Say Hi!</h3> </greet> </div> `</span></span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">AppComponent</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> |
Content Projection trong Angular còn khác nhiều phần nữa nhưng trong bài viết này mình mới nói đến @Input và <ng-content></ng-content> thôi. Hẹn các bạn tại bài viết tiếp theo.