Question

我在组件“ awesomebar.component.html ”中输入了一个角度材质，例如：

@HostListener('document:keydown', ['$event']) onKeydownHandler(event: KeyboardEvent) {
        if(event.keyCode === 192) 
         {
               // input focus logic
               this.placeAutocompleteInput.nativeElement.focus();
               this.placeAutocompleteInput.nativeElement.value = '';
         } 
    }

当我在另一个文件 keyboard.directive.ts 中点击波浪号（〜）时，我正在定义一个角度指令以突出显示输入元素。当我从键盘上单击（〜）时，输入元素应该突出显示。

我的指令代码：

<input #placeAutocompleteInput style="max-width:100%;" 
                [placeholder]="placeholderText"
                [matChipInputFor]="chipListPlaces" 
                [formControl]="mainSearchCtrl" 
                [matAutocomplete]="mainAutocomplete" 
                (keyup.enter)="onEnter($event)"
                captureDoubleTilde/>

我无法在上面的逻辑中获得placeAutocompleteInput.nativeElement。我怎样才能让它发挥作用。由于input元素位于另一个组件文件中，并且指令在不同的文件中定义，因此我无法访问nativeElement。

修改： 通过以下调整获得答案：

在文件awesomebar.component.html中：

@Directive({
      selector: `[captureDoubleTilde]`
    })
    export class CaptureDoubleTildeDirective {
      constructor(
        public dialog: MatDialog,
        private el: ElementRef
        ) { }

        @HostListener('document:keydown', ['$event']) onKeydownHandler(event: KeyboardEvent) {
             if(event.keyCode === TILDE_KEYCODE && localStorage.accessToken != undefined) {
                pressCount += 1;
                var focus= 0;
                if (pressCount >1) {
                    var scrollStep = -window.scrollY / (50 / 15),
                    scrollInterval = setInterval(function(){
                        if ( window.scrollY != 0 ) {
                            window.scrollBy( 0, scrollStep );

                        }
                        else clearInterval(scrollInterval); 
                    },15);
                    this.el.nativeElement.focus();
                    this.el.nativeElement.value = '';

                }
                setTimeout(() => pressCount=0, 200);

            }
        }



    }

在文件keyboard.directive.ts中：

public static string RTFToPlainText(this string s)
    {
       // for information : default Xceed.Wpf.Toolkit.RichTextBox formatter is RtfFormatter 
        Xceed.Wpf.Toolkit.RichTextBox rtBox = new Xceed.Wpf.Toolkit.RichTextBox(new System.Windows.Documents.FlowDocument());
        rtBox.Text = s;
        rtBox.TextFormatter = new Xceed.Wpf.Toolkit.PlainTextFormatter();
        return rtBox.Text;

    }

然而，当我双击波浪线时，伴随高亮显示，（〜）字符显示在我的输入中，我该如何纠正它。

Answer 1

我在这里编辑了DEMO。所有都应用于同一级别的组件和指令，但您可以拆分它们并在更高级别使用，但也可以将 TestService 添加到app.module providers数组并导入它。

什么是this.placeAutocompleteInput？你的指令是片段吗？如果是，如果您将其应用于您的输入，您应该通过 ElementRef 访问指令的主机来使其工作：

import {ElementREf} ...

constructor(private elR: ElementRef){}

@HostListener('document:keydown', ['$event']) onKeydownHandler(event: KeyboardEvent) {
        if(event.keyCode === 192) 
         {
               // input focus logic
               this.elR.nativeElement.focus();
               this.elR.nativeElement.value = '';
         } 
    }

P.S。我也想知道为什么你需要focus()如果按下键 - 它是否已经集中注意力？

在这里你可以see a DEMO。我改变了几个事件，但想法是一样的。点击space，焦点将被删除，输入值也为空字符串。

在点击波浪线上聚焦角度材料输入

1 个答案: