在根模板的不同部分渲染 Angular 组件

分享于2022年07月17日 angular frontend templates 问答
【问题标题】:在根模板的不同部分渲染 Angular 组件(Render Angular components in different parts of the root template)
【发布时间】:2022-01-24 12:16:10
【问题描述】:

鉴于以下 Angular 视图:

  
    
      The content of the first menu item #1 goes here...
    
    
      
      
    
    
      The content of the third menu item #3 goes here...
    
  

如何在手风琴组件模板的一部分中呈现手风琴项组件的模板,以及在根模板的另一部分中呈现手风琴项内的任何内容?

// the accordion template
... The children of accordion-item are being rendered here ...

  • 如何渲染手风琴项组件的模板?这是什么意思。 ?这很混乱。
  • 我必须以某种方式将 中的任何组件甚至纯文本移动到要呈现的 模板中的特定位置。这有点像你将子组件与其父组件分离并在根模板中单独呈现它们。
  • 根模板,是指哪一个?举一个例子。

【解决方案1】:

你可以按照这个非常好的教程(对于标签,但这是相同的原理),推荐使用 Angular 的 QueryList 功能:

https://juristr.com/blog/2016/02/learning-ng2-creating-tab-component/

您可以使用以下方法访问 AccordionItemComponent 类型的子组件:

@ContentChildren(AccordionItemComponent) items: QueryList;