[英]Angular (2 & 4) Access template variable reference from Directive
I have a Directive which goal is to add a suggestion list under a prefix-field-text component. 我有一个指令,目标是在前缀字段文本组件下添加建议列表。 This component is basically a searchbar.
该组件基本上是一个搜索栏。
My directive currently look like this (in all my code pieces I removed imports to add readibility): 我的指令当前如下所示(在我所有的代码段中,我删除了导入以增加可读性):
@Directive({
selector: '[prefixSuggest]',
exportAs: 'prefixSuggest',
host: {
'class': 'prefix-field-suggest__container'
}
})
export class PrefixFieldSuggestDirective implements AfterViewInit {
private componentReference: ComponentRef<PrefixFieldSuggestComponent>;
@Input() fieldTextRef: ElementRef;
@Input() list: Array<PrefixSuggestLineInterface>;
@ViewChild('fieldTextRef', {read: ViewContainerRef}) fieldTextContainer;
constructor(private _injector: Injector, private resolver: ComponentFactoryResolver) {
this.resolver.resolveComponentFactory(PrefixFieldSuggestComponent);
}
ngAfterViewInit(): void {
const prefixFieldSuggestFactory = this.resolver.resolveComponentFactory(PrefixFieldSuggestComponent);
this.componentReference = prefixFieldSuggestFactory.create(this._injector);
this.componentReference.instance.list = this.list;
this.fieldTextContainer.insert(this.componentReference.hostView);
}
}
And my component looks like this : 我的组件看起来像这样:
@Component({
selector: 'prefix-field-suggest',
templateUrl: './prefix-field-suggest.component.html',
styleUrls: ['./prefix-field-suggest.component.scss']
})
export class PrefixFieldSuggestComponent {
/** Item list to display */
@Input() list: Array<PrefixSuggestLineInterface>;
/** Search string typed in search input */
@Input() searchTerm: string;
/** Input ID to align itself beneath */
@Input() inputId: string;
/** Offset between the suggest and the input; default 0 */
@Input() offset: number = 0;
/** Event when an item is selected */
@Output() itemSelected: EventEmitter<any>;
}
The template file for the PrefixFieldSuggestComponent : PrefixFieldSuggestComponent的模板文件:
<div class="prefix-field-suggest"
[ngStyle]="{ 'top': offset + 'px'}">
<span *ngFor="let item of list">
{{item.title | prefixBoldifyTerm:searchTerm}} {{item.metaData}}
</span>
</div>
the PrefixSuggestLineInterface is just a contract interface so that different people in my team can implement their own suggestion lines, depending on the information they want to display into it. PrefixSuggestLineInterface只是一个契约接口,因此我们团队中的不同人员可以根据他们想要在其中显示的信息来实施自己的建议行。 ATM it's basically 2 string fields.
ATM基本上是2个字符串字段。
Question : I would like to access to the ViewContainerRef of the prefix-field-ext (searchbar) component, from my directive. 问题:我想从我的指令中访问prefix-field-ext(搜索栏)组件的ViewContainerRef。 I tried many things like #[fieldTextRef], #[fieldTextRef]="mysearchbar", fieldTextRef, etc ....
我尝试了很多事情,例如#[fieldTextRef],#[fieldTextRef] =“ mysearchbar”,fieldTextRef等...。
I tried these possibilities on this simple page : 我在这个简单的页面上尝试了这些可能性:
<div class="prefix-search-group">
<prefix-field-text prefixSuggest #fieldTextRef="prefixSuggest" list="list" [identifier]="search"></prefix-field-text>
</div>
But in every cases, my fieldTextRef Input is always null. 但是在每种情况下,我的fieldTextRef输入始终为null。 (Because it's not a child element).
(因为它不是子元素)。 Is it even possible to do what I'm trying to do ?
甚至有可能做我想做的事情?
Thanks a lot for your enlightning. 非常感谢您的启发。
If you want to get ViewContainerRef
for <prefix-field-text prefixSuggest
just inject it in constructor prefixSuggest
directive because it is applied on the same element: 如果要获取
<prefix-field-text prefixSuggest
ViewContainerRef
,只需将其注入构造函数prefixSuggest
指令中,因为它应用于相同的元素:
export class PrefixFieldSuggestDirective implements AfterViewInit {
constructor(private fieldTextContainer: ViewContainerRef,...) {}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.