另一个回答与此相关但不同。
如果要更接近此问题,请参见:如何在ng-content周围有条件地包装div - 我的解决方案适用于Angular 4,但链接的问题提供了一些关于如何在Angular 2中实现这一点的提示。
我通过组件和指令的组合来解决这个问题。我的组件看起来像这样:
import { Component, Input, TemplateRef } from '@angular/core';
@Component({
selector: 'my-wrapper-container',
template: `
<div class="whatever">
<ng-container *ngTemplateOutlet="template"></ng-container>
</div>
`
})
export class WrapperContainerComponent {
@Input() template: TemplateRef<any>;
}
我的指令像这样:
import { Directive, OnInit, Input, TemplateRef, ComponentRef, ComponentFactoryResolver, ViewContainerRef } from '@angular/core';
@Directive({
selector: '[myWrapperDirective]'
})
export class WrapperDirective implements OnInit {
private wrapperContainer: ComponentRef<WrapperContainerComponent>;
constructor(
private templateRef: TemplateRef<any>,
private viewContainerRef: ViewContainerRef,
private componentFactoryResolver: ComponentFactoryResolver
) { }
ngOnInit() {
const containerFactory = this.componentFactoryResolver.resolveComponentFactory(WrapperContainerComponent);
this.wrapperContainer = this.viewContainerRef.createComponent(containerFactory);
this.wrapperContainer.instance.template = this.templateRef;
}
}
为了能够动态加载你的组件,你需要将你的组件列为模块内的一个
entryComponent
:
@NgModule({
imports: [CommonModule],
declarations: [WrapperContainerComponent, WrapperDirective],
exports: [WrapperContainerComponent, WrapperDirective],
entryComponents: [WrapperContainerComponent]
})
export class MyModule{}
所以最后的HTML代码是:
<some_tag *myWrapperDirective />
其呈现效果为:
<my-wrapper-container>
<div class="whatever">
<some_tag />
</div>
</my-wrapper-container>
*myWrapperDirective
而不是*myWraperDirective
时会有所帮助 :) 惊讶的是它没有报错,没有识别到那个名称。 - Tyler Rick#
元素引用无法正常工作。例如,对于错误,这总是显示为空: `<input type="text" name="age" #ageRef="ngModel" [(ngModel)]="age" required *myWrapperDirective /><pre>{{ageRef?.errors | json}}</pre>` 如果您同时将<input>
和使用元素引用的代码包装在同一个<div *myWrapperDirective>
中,则可以正常工作...但是,如果您需要在父组件中始终使用元素引用,则无法正常工作。有什么办法可以将元素引用“导出”以供指令外部使用吗? - Tyler Rick