How to wrap each child of contentchildren in their own elements in Angular

前端未结
关注
 1  2067
慢半拍i 2021-01-19 17:21
lets say I want to make a component that arranges all of its children. I should be able to provide the element for example:

      
      
        
          1条回答        

        
                    
            
            
                         
                
              
              
                
                   盖世英雄少女心
                                             
                
                
                (楼主)
            
              
              
                2021-01-19 17:42
              

            
            
                        
Of course you can! :)

And it is very simple! (Directly to the Stackplitz Demo)

Angular provides a perfect API for this kind of problems.

Basically what you want is to splitt your  in their different parts.

First of all you have to mark the portions you want to display inside the 
 elements via a directive. The best way to achive this is via a Structural Directive, because it generates a  for us, which we need later.

The Directive we build is very basic. It only injects the TemplateRef in the constructor and saves the template in a `public variable:

list-item.directive.ts



import { Directive, TemplateRef } from '@angular/core';

@Directive({
  selector: '[appListItem]'
})
export class ListItemDirective {

  public itemTemplate: TemplateRef;

  constructor(private templateRef: TemplateRef) {
    this.itemTemplate = this.templateRef;
  }

}




With this directive we mark our html elements which we like to place inside a 
 element.

app.component.ts




  foo
  bar
  etc





Inside LayoutListComponent we get hold of the projected elements via @ContentChildren(ListItemDirective) listItems

layout-list.component.ts


import { Component, ContentChildren, QueryList } from '@angular/core';

@Component({
  selector: 'app-layout-list',
  templateUrl: './layout-list.component.html',
  styleUrls: ['./layout-list.component.css']
})
export class LayoutListComponent {
  @ContentChildren(ListItemDirective) listItems: QueryList;
}




Finally inside the Component template we are iterating through the listItems and placing the TemplateReference of every item inside a ngTemplateOutlet

layout-list.component.html



  
    
      
    
  





DEMO: Stackblitz Demo

GITHUB SOURCE: Github Source
    
             
                                                        
            
            
              
                
                0
              
                   
                
               讨论(0)
              
                                                  
              
              
                          
             
       
          
              
                                    
                         
                    


               
            
    发布评论:
    
         
                        
    
    提交评论 
  
  

                    
                    
                    
                        
                        
                         加载中...
                        
                    
                
          
                              			
        
        
        
          
            
            
              
              
            
    


                                 
              
            
                          
    

        
         
                验证码
                
                  
                
                
                   看不清?
                
              
                                  
                    
   
                 
             
              提交回复