我有一个包装形式控制组件。这增加了可重用的代码为每个控件,但为了简单起见,可以说,它是所有添加标签:
app.component:
<app-wrapper labelText="First Name">
<input type="text" >
</app-wrapper>
wrapper.component:
<div style="border:thin solid; padding:10px">
<label>{{labelText}}</label>
<ng-content></ng-content>
</div>
export class WrapperComponent {
@Input() labelText;
}
我想使纸上出现@Directive代替,使HTML的形式量进一步减少,但我不能完全得到我的头周围它是如何工作的。我的想法是这样的:
app.component:
@Component({
selector: 'my-app',
template: `
<input type="text" wrapper labelText="First Name">
<input type="text" wrapper labelText="Last Name" >
<ng-template #tpl>
<div style="border:thin solid; padding:10px">
<label>{{labelText}}</label>
<ng-content></ng-content>
</div>
</ng-template>`
})
export class AppComponent {
@ViewChild('tpl', {read:TemplateRef}) tpl
constructor(private service: TemplateService) { }
ngAfterViewInit() {
this.service.template = this.tpl;
}
}
wrapper.dir
@Directive({
selector: '[wrapper]'
})
export class WrapperDirective {
@Input('labelText') labelText;
constructor(
private vc:ViewContainerRef,
private service:TemplateService) { }
ngAfterViewInit() {
of(null).pipe(
delay(1)).subscribe(() => {
let tpl = this.service.template;
this.vc.createEmbeddedView(this.service.template)
})
}
}
不幸的是,我相信,这把标签在前面输入的标签后代替。我怎样才能将其插入前面?
另一个问题是:我怎么访问#labelText模板?
我想创建一个,你可以在一个包装输入的DIV设置属性选择的组件。就像是:
import { Component, Input } from '@angular/core';
@Component({
selector: 'div[wrapper]',
template: `
<label>{{labelText}}</label>
<ng-content></ng-content>
`,
styles: [`
:host {
border:thin solid;
padding:10px;
}
`]
})
export class WrapperComponent {
@Input() labelText: string;
}
并使用它,如:
<div wrapper [labelText]="'test text'">
<input type="text">
</div>
https://stackblitz.com/edit/attribute-selector-component?file=src%2Fapp%2Fwrapper.component.ts
在模板访问labelText
是非常简单的。你只需要通过上下文(第2参数)createEmbeddedView
({labelText: this.labelText}
)。您也可以通过将指标(第三个参数),以createEmbeddedView
为0插入模板作为视图的第一个孩子。
https://angular.io/api/core/ViewContainerRef#createEmbeddedView
如果你真的想用一个指令,它必须是一个结构性的指令,如果你想改变的DOM元素位置(加上围绕它的包装)。这样,你实际得到的元素的模板,并为包装的模板和您的指令回绕到他们(当然你也可以,如果你想使用一个模板服务...):
import { Directive, Input, ViewContainerRef, TemplateRef, EmbeddedViewRef } from '@angular/core';
@Directive({
selector: '[wrapperLabelText]',
})
export class WrapperDirective {
private _labelText: string;
private embedded: EmbeddedViewRef<any>;
@Input('wrapperLabelText')
get labelText() {
return this._labelText;
}
set labelText(value: string) {
this._labelText = value;
if (this.embedded) {
this.embedded.context.labelText = value;
}
};
@Input('wrapperLabelTextWrapper')
wrapperTemplate: TemplateRef<any>;
constructor(
private templateRef: TemplateRef<any>,
private vc: ViewContainerRef,
) {
}
async ngAfterViewInit() {
await new Promise(resolve => setTimeout(resolve));
const ref = this.vc.createEmbeddedView(this.wrapperTemplate, {
wrapped: this.templateRef,
labelText: this.labelText,
});
}
}
并使用它,如:
<input type="text" *wrapperLabelText="'test';wrapper:wrapperTemplate">
<input type="text" *wrapperLabelText="'test 2';wrapper:wrapperTemplate">
<ng-template #wrapperTemplate let-wrapped="wrapped" let-labelText="labelText">
<div style="border:thin solid; padding:10px">
<label>{{labelText}}</label>
<ng-container *ngTemplateOutlet="wrapped"></ng-container>
</div>
</ng-template>
https://stackblitz.com/edit/wrapper-directive?file=src/app/app.component.html