blog/structural-directive-different-perspective/

[giscus[bot]]

blog/structural-directive-different-perspective/

Personal blog by Chau Tran

https://nartc.me/blog/structural-directive-different-perspective/?fbclid=IwAR0Wbw_XUt8Bz5VaW0F1_QG62BLDlfN_JhRoXKgisBwcvujGcixSP78RY-M

[samuelfernandez]

Nice and thorough explanation! Just wondering if an approach of using DI would work and avoid the need to use a custom renderer. VCR can create embedded views with a custom injector. You could create a token to pass the params, and then inject that in the child components. That would be available while insantisting without waiting for inputs to resolve. Would that work?

[nartc]

Yes, that would be what I'd use if I didn't use a Custom Renderer.

[ngiakhanh]

Ủa a cho e hỏi mình store injector trên array của renderfactory như v thì trong trường hợp mình có nhìu ngt-box-geometry mỗi cái có ngtargs khác nhau thì sao ạ ?

[nartc]

Good question. Implementation đúng hơn sẽ phải invalidate cái NgtArgs instance vừa access đi. Thông thường, mỗi element sẽ chỉ đi kèm 1 NgtArgs thôi.

Nhìn chung thì impl này vẫn phụ thuộc vào thứ tự mà Angular renders Comment và EmbeddedView nên vẫn không 100% guarantee lắm.

[ngiakhanh]

Có cái implementation nào guarantee 100% k a. Lỡ future thứ tự render đổi thì của mình k break ạ

[nartc]

Order từ createEmbeddedView -> Renderer#createElement là 100% guarantee đúng rồi đó. Còn khoản track commentNodes thì anh vẫn chưa tìm ra cách tie thằng NgtArgs với cái element được attach

<!-- chưa biết tie 2 thằng này lại bằng cách gì -->
<ngt-box-geometry *args="[1, 1, 1]" />

Bây giờ mình chỉ có dựa vào thứ tự của Angular chạy như sau:

• Comment is created
• NgtArgs is instantiated
• Comment is tracked (last item)
• Sometime in the future, [args] is resolved
• args value is stored (we also flag that this new value has never been injected)
• createEmbeddedView is invoked
• ngt-box-geometry is created. At this point, we look for the Comment (from the end of the list) with NgtArgs instance with an args that has never been injected.

Ở thời điểm hiện tại thì anh chưa gặp lỗi racing-condition hoặc conflict giữa các structural directives qua trong vô vàn examples mà anh tạo nên cứ cho là implementation này cũng 90% safe 😅

Future trong Angular Core họ có breaking change thì buộc anh phải handle trong angular-three thôi. Consumers sẽ không bị ảnh hưởng (ideal là thế 😅)

[OmerGronich]

Incredible article! Now I have to go over your entire blog 🤩

quick question, why did you need to skipSelf in the CustomRendererFactory?

private platformRendererFactory = inject(RendererFactory2, { skipSelf: true });

[nartc]

Thank you for the kind words. (I have some hot takes so be cautious 😅)

Good question on the skipSelf. The main purpose of skipSelf is to allow the Custom Renderer to inject the underlying platform's renderer (i.e: default on the browser is DomRendererFactory, in nativescrilt is NativescriptRendererFactory). The idea is to extend the platform's Renderer instead of replacing it completely.

Please note that injecting the platform's renderer only works 2 out of 3 places where a Custom Renderer can be provided:

• App level (bootstrapApplication): won't work because we're replacing the platform's Renderer at this point
• Route level (Route#providers): works
• Component level (ViewContainerRef.createComponent): works