正文 

当前位置： 首页 > 程序 > java教程

typescript使用指令将控制集中在角4#angular(代码片段)

author author     2023-01-23     540

关键词： 

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)

Angular 指令使用 Typescript 接收对象作为属性

】Angular指令使用Typescript接收对象作为属性【英文标题】：AngulardirectivereceivingobjectasattributeusingTypescript【发布时间】：2017-02-1409:17:12【问题描述】：我正在使用Angular1.5.8和Typescript进行开发我有一个指令，它在另一个指令（当然还... 查看详情

如何将我的指令链接到 typescript 类中的 html？

】如何将我的指令链接到typescript类中的html？【英文标题】：HowcanIlinkmydirectivetohtmlfromthetypescriptclass?【发布时间】：2016-01-2010:38:33【问题描述】：我正在研究一个角度指令POC。这里我有一个HTML页面和一个控制器类。我的打字稿类... 查看详情

来自控制器的访问指令方法

...【发布时间】：2018-04-1915:28:15【问题描述】：我正在使用Typescript在AngularJs中编写应用程序，但在从控制器类访问指令中的方法时遇到问题。我将\'control:\'=\',添加到指令的范围内，认为这会将指令中方法的控制绑定到控制器，但... 查看详情

Typescript .bind() 使用超过 4 个参数时会出现类型错误

】Typescript.bind()使用超过4个参数时会出现类型错误【英文标题】：Typescript.bind()givestypeerrorwhenusingmorethan4parameters【发布时间】：2019-11-2601:59:11【问题描述】：使用typescript3.5.2我遇到了与.bind()相关的问题。我正在尝试用一些初始参... 查看详情

强制 LDR 指令将值放入 THUMB 程序集中的文字池中

...【发布时间】：2021-04-2515:27:04【问题描述】：我正在尝试使用devkitpro创建匹配的GBA反汇编，但在使用THUMB指令LDRR1,=0x3FF时遇到问题。我希望它把0x3FF放在文字池中并生成一个PC相对地址，这是汇编版本所做的，但 查看详情

将 Typescript 2.3 模块发布到 NPM 以供 Angular 4 使用

】将Typescript2.3模块发布到NPM以供Angular4使用【英文标题】：PublishingTypescript2.3ModulestoNPMforAngular4Consumption【发布时间】：2017-10-2504:38:56【问题描述】：WritingNPMmodulesinTypescript中有相关说明，但是它已经过时了，现在有很多不同的答... 查看详情

如何将 Redux 4.0 TypeScript 绑定与 redux-thunk 一起使用

】如何将Redux4.0TypeScript绑定与redux-thunk一起使用【英文标题】：HowtouseRedux4.0TypeScriptbindingswithredux-thunk【发布时间】：2018-11-0921:34:10【问题描述】：我在使用带有redux-thunk的Redux4.0的新TS绑定时遇到问题。我通过将基本的Redux"TodoList"... 查看详情

带有 ControllerAs 和 TypeScript 类的 AngularJs 指令

】带有ControllerAs和TypeScript类的AngularJs指令【英文标题】：AngularJsdirectivewithControllerAsandTypeScriptClass【发布时间】：2016-01-2404:00:46【问题描述】：我已经使用TypeScript编写了一个AngularJs指令，以将模型值复制到剪贴板，并且指令的“... 查看详情

将 Typescript 2 @Types 与 typescript 1.8.10 一起使用

】将Typescript2@Types与typescript1.8.10一起使用【英文标题】：UsingTypescript2@Typeswithtypescript1.8.10【发布时间】：2017-01-1315:45:06【问题描述】：目前我正在尝试在我的项目中使用d3-dragv4类型。正在使用Ts1.8.10，尚未准备好迁移到TS2测试版... 查看详情

使用 Typescript 发出角度指令

】使用Typescript发出角度指令【英文标题】：IssueangulardirectivesusingTypescript【发布时间】：2015-05-2700:07:15【问题描述】：您好，我正在尝试使用Typescript类实现以下angular指令，angular.module(\'mota.main\',[]).directive(\'modalDialog\',function()retur... 查看详情

Webpack 4，Vue 同时使用 Typescript 类和 JS 代码。

】Webpack4，Vue同时使用Typescript类和JS代码。【英文标题】：Webpack4,VueusingTypescriptclassesandJScodeatthesametime.【发布时间】：2019-02-1406:52:17【问题描述】：我正在将JS文件迁移到Typescript，我的目标是能够在Vue中同时使用JS和Typescript类。... 查看详情

指令的angularjs typescript控制器类中未定义的范围变量

】指令的angularjstypescript控制器类中未定义的范围变量【英文标题】：ScopeVariableundefinedinangularjstypescriptcontrollerclassofdirective【发布时间】：2016-05-2515:31:41【问题描述】：我已经在ag网格上创建了​​包装器指令，如下所示functionMyDi... 查看详情

layabox---typescript---三斜线指令(代码片段)

目录1介绍2.预处理输入文件3.错误4.使用--noResolve1介绍三斜线指令是包含单个xml标签的单行注释。注释的内容会作为编译器指令使用。三斜线指令仅可放在包含它的文件都最顶端。如果它们出现在一个语句或声明之后，那么它... 查看详情

使用 typescript 模板将 create-react-app 更新到 4.0 时出错

】使用typescript模板将create-react-app更新到4.0时出错【英文标题】：Errorwhenupdatingcreate-react-appto4.0withtypescripttemplate【发布时间】：2021-01-1420:16:56【问题描述】：我想将react-scripts更新到下一个版本(4.0.0)，这样我就可以通过本指南here... 查看详情

使用 TypeScript 在 AngularJS 中的指令之间共享来自异步调用的数据

】使用TypeScript在AngularJS中的指令之间共享来自异步调用的数据【英文标题】：SharingdatafromasynchronouscallsamongstdirectivesinAngularJSwithTypeScript【发布时间】：2016-06-2421:49:29【问题描述】：我可以找到解决这个问题的一些方法，但没有具... 查看详情

在 Typescript 中将 angularjs 指令实现为类

】在Typescript中将angularjs指令实现为类【英文标题】：ImplementingangularjsdirectivesasclassesinTypescript【发布时间】：2014-06-2512:06:17【问题描述】：因此，在查看了typescript中angularjs指令的一些示例之后，似乎大多数人都同意在实现它们时... 查看详情

typescript使用指令值(代码片段)

查看详情

如何摆脱警告 .ts 文件是 TypeScript 编译的一部分，但未使用

】如何摆脱警告.ts文件是TypeScript编译的一部分，但未使用【英文标题】：Howtogetridofthewarning.tsfileispartoftheTypeScriptcompilationbutit\'sunused【发布时间】：2020-01-0320:55:50【问题描述】：我刚刚将Angular更新为最新的9.0.0-next.4。我没有使用... 查看详情