Komponen Sudut dengan Konten Inline

Ketika Anda membuat komponen baru ketika mengembangkan pada Angular, Anda berusaha untuk membuatnya sedemikian rupa sehingga dapat digunakan berulang kali. Sama seperti dalam pengembangan perangkat lunak, seorang programmer berusaha membuat kodenya dapat digunakan kembali sebanyak mungkin. Pada saat yang sama, saya ingin memiliki komponen yang fleksibel, tetapi tidak terlalu rumit.



Biasanya, komponen harus dibuat sebodoh mungkin agar lebih mudah dirawat dan diuji. Tetapi pada saat yang sama, mereka dapat disesuaikan dan fleksibel sehingga Anda dapat menggunakannya kembali berkali-kali, dan tidak berurusan dengan komponen kloning yang serupa secara visual dan fungsional, tetapi masih berbeda dalam sesuatu. Atau jangan menambahkan banyak parameter ke komponen, berdasarkan yang untuk mengaktifkan atau menonaktifkan perilaku komponen, tetapi yang sebenarnya akan digunakan dalam 1 dari 100 kasus.

Untuk membuat kapal selam, yang harus tenggelam ke dasar laut biru tanpa risiko bagi kehidupan awak, dan kemudian memodifikasinya sebelum terbang melalui langit biru bukanlah tugas yang mudah.

Komponen sudut adalah unit terkecil dari antarmuka pengguna yang harus melakukan satu tugas sederhana dan tidak lebih. Membuat komponen untuk semua kesempatan adalah praktik yang buruk. Karena itu, Anda harus menemukan kompromi antara fleksibilitas dan kesederhanaan.

Misalkan Anda ingin membuat komponen yang terdiri dari beberapa jenis pembungkus, di dalamnya ada header dan beberapa jenis saklar, dan beberapa konten di bawahnya. Sesuatu seperti ini:



Seluruh komponen, yang akan disebut widget, diuraikan dalam warna hijau. Sakelar tajuk disorot dalam warna merah dan konten disorot dengan warna biru. Angular adalah kerangka kerja yang sangat kuat, menciptakan komponen yang mirip dengan yang ada di gambar adalah tugas yang sangat sepele untuk Angular.

Tetapi bagaimana jika komponen ini dibuat lebih fleksibel, misalnya, sehingga kontennya berubah tergantung pada parameter komponen widget?

Anda dapat menyelesaikan representasi eksternal konten berdasarkan parameter widget, misalnya, menggunakan arahan struktural ngIf . Anda dapat beralih di antara berbagai tampilan. Dan jika ada terlalu banyak pengiriman, Anda dapat menggunakan arahan struktural ngSwitch lain.

Dan jika pandangan berbeda akan merespons secara berbeda terhadap tindakan pengguna? Kemudian kode komponen juga akan memiliki banyak pernyataan bersyarat. Tetapi kodenya, di mana ada banyak pernyataan kondisional, seiring waktu menjadi sulit untuk mempertahankan, memperbaiki bug atau memperluas fungsionalitas ...

Anda dapat membuat komponen widget sehingga menerima konten apa pun, tetapi pada saat yang sama ia melempar nilai yang dipilih dari panel filter ke dalam komponen area konten. Dan saya juga ingin dapat meneruskan parameter dari komponen induk widget ke konten, tanpa mempengaruhi komponen widget itu sendiri. Untuk mengatasi masalah ini, Anda dapat menggunakan arahan ngTemplateOutlet yang luar biasa , yang akan memungkinkan Anda untuk "menyelesaikan" representasi visual komponen. Untuk informasi tambahan, Anda dapat merujuk ke dokumentasi , meskipun menurut saya semua kekuatannya tidak ditampilkan di sana.

Dalam hal ini, komponen widget dapat direpresentasikan sebagai berikut:

// widget.component.ts … private widgetContentTemplate: TemplateRef<any>; //      @ContentChild(WidgetContentTemplateDirective, { read: TemplateRef }) set WidgetContentTemplate(value: TemplateRef<any>) { this.widgetContentTemplate = value; } get WidgetContentTemplate(): TemplateRef<any> { return this.widgetContentTemplate; } … 

 <!-- widget.component.html --> … <div class="widget__content"> <!--      ,      context.   ,     --> <ng-container *ngTemplateOutlet="WidgetContentTemplate || DefaultWidgetContentTemplate; context: { post: SelectedPost }"> </ng-container> </div> <ng-template #DefaultWidgetContentTemplate> <div>[    ]</div> </ng-template> … 

Arahan ngTemplateOutlet menerima objek TemplateRef yang dibaca dalam komponen menggunakan @ContentChild. Untuk melakukan ini, Anda perlu membuat arahan sederhana. Ini kodenya:

 // widget-content-template.directive.ts import { Directive, TemplateRef } from '@angular/core'; @Directive({ selector: '[appWidgetContentTemplate]' }) export class WidgetContentTemplateDirective { get Template(): TemplateRef<any> { return this.template; } constructor(private readonly template: TemplateRef<any>) {} } 

Parameter dari sakelar widget dapat diteruskan ke konten menggunakan objek konteks. Agar parameter dari konteks dibaca dengan benar oleh komponen, perlu di komponen induk, dalam kasus kami itu adalah AppComponent, jangan lupa untuk menggambarkannya sebagai berikut:

 <!-- app.component.html --> <app-widget-component Title="  (  )"> <!-- let-post="post" ,         --> <ng-template appWidgetContentTemplate let-post="post"> <app-post-view [Post]="post"></app-post-view> </ng-template> </app-widget-component> <br> <br> <app-widget-component Title="  (  )"> <!--  let-post="post"     ,  ShowPostInfo  AppComponent --> <ng-template appWidgetContentTemplate let-post="post"> <app-post-view [Post]="post" [ShowPostInfo]="ShowPostInfo"></app-post-view> </ng-template> </app-widget-component> 

Dengan demikian, kami memiliki komponen widget yang menerima dan menampilkan konten apa pun, sedangkan komponen widget itu sendiri tidak harus tahu apa-apa tentang konten tersebut. Ini hanya meneruskan opsi sakelar. Membacanya atau tidak adalah masalah isi.



Versi lengkap kode dapat dilihat di sini .