Question

在Angular应用中，我需要创建一个自定义directive，并将其附加到我的反应式表单的输入中。

此类指令应具有以下行为：

当用户单击输入时，面板应出现在输入下方。
在此面板中，将允许用户选择某些值（例如，复选框，单选按钮等）。应该以某种方式将控制输入的当前值传递到此类面板，以反映当前选择。最终，我将需要几种类型的此类指令，其内容在显示面板中具有不同的内容，因此我想尽可能多地重复使用代码。
用户选择该值时，面板应消失，并且控件输入的值应更新（根据用户选择的内容）。

Datepicker from ngx-bootstrap是我要完成的工作的一个很好的例子。就我而言，我只希望将不同于日历的内容显示给用户。

完成我需要的最好方法是什么？

Answer 1

在工作了很多之后，以下代码为我工作了。（我并没有完全使用css实现，切换但是功能起作用了）。为了达到上述目的，我使用了Jquery，customdirectives。

1。）将jquery添加到angular（转到项目根目录的 index.html ）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> // add this script to index.html

2。）使用ng g指令 yourCustomDirectiveName

生成自定义指令

3。）以下是mycustomDirective代码。请看一看。

  import { Input, Output, EventEmitter, ViewChild, ElementRef, Directive, Renderer } from '@angular/core'

  declare var $ :any;

  @Directive({
     selector: '[appCustomSelection]'
  })
  export class CustomSelectionDirective {

     constructor(public el: ElementRef, public renderer: Renderer) { }

     toggleSelection = false; // you can write your code for toggles i didn't write

     @Output() selectedOutputEvent = new EventEmitter<string>();

     ngOnInit() {
        var that = this;
        $(this.el.nativeElement).click(function(){
             //added static elements if you want to add dynamic you can use @Input() with array
             var s = $("<select id='customId'/>"); 
             $("<option />", {value: "option1", text: "option1"}).appendTo(s); 
             $("<option />", {value: "option2", text: "option2"}).appendTo(s);  
             $("<option />", {value: "option3", text: "option3"}).appendTo(s);            
             $("<option />", {value: "option4", text: "option4"}).appendTo(s);

             var hostNode = that.el.nativeElement;
             var parentNode = hostNode.parentNode;
             s.appendTo(parentNode);
             console.log("appended");

             //customId for listening of options in select dropdown
             $('#customId').change(function(){
                // that.selectedOption = this.value;
                //console.log("selected value is "+that.selectedOption);
                  that.selectedOutputEvent.emit(this.value);
             })
       });
   }

 }

以下是 appComponent.html

<div>
    <input type="text" appCustomSelection 
      (selectedOutputEvent)="listenToEvent($event)" 
      [(ngModel)]="inputValue"
      readonly
    > // here you can pass your custom values of dropdowns like [dropDownArray]="array" & in customDirective class you have to give **@Input() dropDownArray = []**
</div>

以下是appComponent.ts

export class AppComponent {
   title = 'customDirectiveStackoverflow';

   inputValue = "";

   listenToEvent(data) {
      console.log("data is "+data);
      this.inputValue = data;
   }
 }

希望以上的事情会有所帮助。您可以添加CSS /切换。以下链接帮助了我。

customDatepicker using customDirective

输入的角度指令，允许选择一个值

1 个答案: