typescript 使用指令将控制集中在角4 #angular

Posted 2021-05-21

import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { Input, Component, HostListener, ViewChild, ElementRef, OnInit, Directive, Renderer, AfterViewInit } from '@angular/core';


//reusable modal.
//more on this reusable component: https://ng-bootstrap.github.io/#/components/modal/examples
@Component({
  selector: 'modal-quickadd-todo',
  template: `
    <div class="modal-header">
      <h4 class="modal-title">Hi there!</h4>
      <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <p>Hello, {{name}}!</p>
      <div class="row">
        <div class="col">
            <div class="form-group">
                <input #input type="text" class="form-control" placeholder="Your task" #txtTodo (keyup.enter)="activeModal.close(txtTodo.value)"> <!--enter trigger event https://stackoverflow.com/questions/37936961/in-angular2-does-enter-key-trigger-any-click-event-on-the-page-->
            </div>    
        </div>
    </div>
        
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline-success" (click)="activeModal.close(txtTodo.value)">Save</button>
    </div>
  `
})
export class ModalQuickAddTodo implements AfterViewInit {

  //note: this corresponds when you have a directive `#input` in your control
  @ViewChild('input') vc: ElementRef;
  
  ngAfterViewInit() {
    this.vc.nativeElement.focus(); //focus control using the #input in the template
    this.vc.nativeElement.value = "";
  }

  constructor(public activeModal: NgbActiveModal, private modalService: NgbModal) {}
  

}