Html 指令中的角度(2和4)访问模板变量引用
我有一个指令,目标是在前缀字段文本组件下添加建议列表。这个组件基本上是一个搜索栏 我的指令目前在我删除导入以增加可读性的所有代码段中都是这样的:Html 指令中的角度(2和4)访问模板变量引用,html,angular,typescript,Html,Angular,Typescript,我有一个指令,目标是在前缀字段文本组件下添加建议列表。这个组件基本上是一个搜索栏 我的指令目前在我删除导入以增加可读性的所有代码段中都是这样的: @Directive({ selector: '[prefixSuggest]', exportAs: 'prefixSuggest', host: { 'class': 'prefix-field-suggest__container' } }) export class PrefixFieldSu
@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);
}
}
我的组件如下所示:
@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>;
}
PrefixFieldSuggestComponent的模板文件:
<div class="prefix-field-suggest"
[ngStyle]="{ 'top': offset + 'px'}">
<span *ngFor="let item of list">
{{item.title | prefixBoldifyTerm:searchTerm}} {{item.metaData}}
</span>
</div>
PrefixSuggestLineInterface只是一个合同界面,因此我的团队中的不同人员可以实现他们自己的建议行,具体取决于他们希望在其中显示的信息。ATM基本上是两个字符串字段
问题:
我想从我的指令访问前缀字段ext searchbar组件的ViewContainerRef。我尝试了很多东西,比如[fieldTextRef]、[fieldTextRef]=我的搜索栏、fieldTextRef等等
我在这个简单的页面上尝试了这些可能性:
<div class="prefix-search-group">
<prefix-field-text prefixSuggest #fieldTextRef="prefixSuggest" list="list" [identifier]="search"></prefix-field-text>
</div>
但在任何情况下,我的fieldTextRef输入总是空的。因为它不是子元素。有可能做我想做的事吗
非常感谢您的启发。如果您想获取前缀字段文本组件的ViewContainerRef?prefix field suggest和searchBar有什么关系?prefix field suggest在模板中的位置如何?您能在plunker上提供最小的复制版本吗?实际上我不能,因为我们使用自己的库并将其发布到私有NPM注册表。但我承认我不够清楚。我会更新主题并回答你们:搜索栏实际上是前缀字段建议。它是一个自定义组件,由输入、自定义样式和一些参数组成。您可以在plunker中重新创建相同的情况。我没有要求给我看所有的代码
export class PrefixFieldSuggestDirective implements AfterViewInit {
constructor(private fieldTextContainer: ViewContainerRef,...) {}