Question

我有一个指令，其目标是在前缀字段文本组件下添加建议列表。该组件基本上是一个搜索栏。

我的指令目前看起来像这样（在我的所有代码中，我删除了导入以增加可读性）：

func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
    let identifier = "Capital"
    guard let annotation = annotation as? Capital else { return nil }

    let annotationView = mapView.dequeueReusableAnnotationView(withIdentifier: identifier) ?? MKPinAnnotationView(annotation:annotation, reuseIdentifier:identifier)

    annotationView.annotation = annotation
    annotationView.isEnabled = true
    annotationView.canShowCallout = true
    annotationView.rightCalloutAccessoryView = UIButton(type: .detailDisclosure)

    // set the image to the annotation view
    annotationView.image = annotation.imageForAnnotationView

    return annotationView
}

我的组件看起来像这样：

@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);
    }
  }

PrefixFieldSuggestComponent的模板文件：

@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>;
}

PrefixSuggestLineInterface只是一个合约界面，以便我的团队中的不同人可以实现他们自己的建议行，具体取决于他们想要显示在其中的信息。 ATM它基本上是2个字符串字段。

问题： 我想从我的指令访问前缀-field-ext（搜索栏）组件的ViewContainerRef。我尝试了很多东西，比如＃[fieldTextRef]，＃[fieldTextRef] =“mysearchbar”，fieldTextRef等....

我在这个简单的页面上尝试了这些可能性：

<div class="prefix-field-suggest" 
    [ngStyle]="{ 'top': offset + 'px'}">
    <span *ngFor="let item of list">
        {{item.title | prefixBoldifyTerm:searchTerm}} {{item.metaData}}
    </span>
</div>

但在每种情况下，我的fieldTextRef输入始终为null。（因为它不是子元素）。是否有可能做我想做的事情？

非常感谢你的启发。

Answer 1

如果你想为ViewContainerRef获取<prefix-field-text prefixSuggest，只需将其注入构造函数prefixSuggest指令中，因为它应用于同一元素：

export class PrefixFieldSuggestDirective implements AfterViewInit {
  constructor(private fieldTextContainer: ViewContainerRef,...) {}

来自Directive的Angular（2＆amp; 4）Access模板变量引用

1 个答案: