angular - 将模板内容从父级注入(inject)子级

Question

我有一个第 3 方库组件，我试图通过在某个点添加一些额外的标记来自定义它。我正在使用结构指令来执行此操作，目前我正在使用渲染器以编程方式添加和样式化节点，如下所示:

  const headerDiv = this.newDiv();
   el = this.nativeElement.querySelector('div.ui-dropdown-items-wrapper');
   this.renderer.appendChild(el, this.renderer.createText('sometext'));


  private newDiv(): Element {
   return this.renderer.createElement('div');
 }

标记是这样的:

<div #containerDiv>
  <child-component *myStructuralDirective>
  </child-component>
</div>

有没有办法定义 <ng-template>直接在父组件的标记中并使用渲染器在某个点注入(inject)？像这样的东西:

<div #containerDiv>
  <child-component *myStructuralDirective>
  </child-component>
</div>
<ng-template #footer>
   <p>Some other markup</p>
</ng-template>

然后在我选择的某个点将#footer 的内容注入(inject)到子组件中。注意 - 我无法访问 child ，因为它是已编译的第 3 方库。

这样做的要点是我想看看是否有更好的方法来将标记定义为模板变量，我可以在我的结构指令中使用它，访问该模板并将其注入(inject)子组件中的某个点.

编辑 -
我在看 ViewContainerRef.insert ，不幸的是，这只能根据其他 ViewRef 的位置插入模板s。由于我无法更改第 3 方组件的标记，我可以定义 ng-container标记插入点，并且只需要使用 CSS 选择器。不确定是否有办法根据元素位置插入模板。我知道这是 2 个离散的概念(Angular View 抽象与直接 DOM 插入)，所以我不乐观这可以做到!

Answer 1

是的，您可以使用以下方法将 ng-template 注入(inject)到您希望放置的任何位置:

1.) 使用 ng 容器

 <div #containerDiv>
  <child-component *myStructuralDirective></child-component>

  // This will show your template
  <ng-container [ngTemplateOutlet]="footer"></ng-container>  

</div>

<ng-template #footer>
   <p>Some other markup</p>
</ng-template>

2.) 或使用 注入(inject)它结构指令 使用 ViewContainerRef 和 CreateEmbeddedView

a.)Supply the footer template on your childComponent. myStructuralDirective
is now both a directive and an [] input that asks for a value.

<child-component [myStructuralDirective]="footer"></child-component>

b.) Use default ViewContainerRef declared on the constructor which pertains 
to your current view/screen which the template the template is attached example for this - it is attached on ChildComponentView

@Directive({
    selector: 'myStructuralDirective'
})
export class MyStructuralDirective implements AfterViewInit {

 @Input() myStructuralDirective: TemplateRef<any>;

 constructor(private container: ViewContainerRef) {}

 ngAfterViewInit() {
     this.container.createEmbeddedView(this.myStructuralDirective);
  }

}

3.) 或者在您的 ChildComponent 上提供一个 @Input() 传递页脚模板值

 a.)  <child-component *myStructuralDirective
                       [footerTemplate]="footer"></child-component>

 b.) On the ChildComponent Class, declare its @Input() property

 @Component({
     selector: 'child-component'
  })
  export class ChildComponent {

    @Input() footerTemplate: TemplateRef<any>;

  }

 c.) On your ChildComponent Template, supply an ng-container to wherever you want it to be placed.

 <h1>Header</h1>
 <h1>Content</h1>

 <ng-container [ngTemplateOutlet]="footerTemplate"></ng-container>

4.) 或者您可以在 上提供一个容器子组件

a.) ChildComponent Sample Template

<p>Header</p> 
<p>Content</p>

<div #container></div>

b.) Declare ViewContainerRef and TemplateRef on your ChildComponent Class with the @Input() that requires the footer template value from the component

@Component({...})
export class ChildComponent implements AfterViewInit {

  //From your template <div #container></div> 
  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;

  @Input() footerTemplate: TemplateRef<any>;


  ngAfterViewInit() {
     this.container.createEmbeddedView(this.footerTemplate);
}

}

您的 ng-template 现在将出现在您想要的位置。