小编And*_*uze的帖子

如何在Angular2 Typescript中更改HTML元素readonly和required属性?

对于我的一些组件,我想改变输入字段readonly和来回的必需属性.

我已经设法获得一个正在运行的代码,它可以根据需要更改它们,但问题是它只适用于readonly,但似乎没有按要求工作:虽然元素属性更改为所需的Angular2仍然认为fieldCtrl是有效的.

这是我的plunker,我在这里说明了这个问题:https://plnkr.co/edit/Yq2RDzUJjLPgReIgSBAO?p = preview

//our root app component
import {Component} from 'angular2/core'

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
    <form #f="ngForm">
      <button type="button" (click)="toggleReadOnly()">Change readonly!</button>
      <button type="button" (click)="toggleRequired()">Change required!</button>
      <input id="field" [(ngModel)]="field" ngControl="fieldCtrl" #fieldCtrl="ngForm"/>
      {{fieldCtrl.valid}}
    </form>
    </div>
  `,
  directives: []
})
export class App {
  constructor() {
    this.name = 'Angular2'
  }

  toggleRequired(){
    this.isRequired = !this.isRequired;
    var fieldElement = <HTMLInputElement>document.getElementById('field');
    if (this.isRequired){
      fieldElement.required = true;
      this.field = "it's required now";
    }
    else{
      fieldElement.required = false;
      this.field = …
Run Code Online (Sandbox Code Playgroud)

typescript angular

25
推荐指数
2
解决办法
3万
查看次数

什么是Angular2创建全局键盘快捷键(又名热键)的方法?

在Angular2应用程序中创建全局键盘快捷键(也就是热键)的正确方法是什么?

让我们说好的起点就是开始工作:"?" 用于备忘单和"Alt + s"用于提交表格.

我应该映射"?" 不知何故,主要组件,然后开发属性指令,将应用于那些应该响应特定热键的组件,但是 - 如何防止输入字段响应"?".

angular

25
推荐指数
2
解决办法
2万
查看次数

如何在Angular 2 Typescript中复制到剪贴板?

有没有办法在Angular2 Typescript框架中复制剪贴板(多浏览器)中的文本?

我只找到使用Javascript的来源,例如

document.execCommand('copy')
Run Code Online (Sandbox Code Playgroud)

clipboard.js angular

22
推荐指数
3
解决办法
3万
查看次数

使用组件模板与templateUrl的差异

Angular 2允许使用`字符来引用它们来编写多行模板.也可以将多行模板放入.html文件中并引用它templateUrl.

将模板直接放入组件中似乎很舒服,因为它只是在一个地方,但这样做有什么缺点吗?

第一种方法:

import {Component} from 'angular2/core';
@Component({
    selector: 'my-app',
    template: `
    <h1>My First Angular 2 multiline template</h1>
    <p>Second line</p> 
    `
})
export class AppComponent { }
Run Code Online (Sandbox Code Playgroud)

vs第二种方法:

import {Component} from 'angular2/core';
@Component({
    selector: 'my-app',
    templateUrl: 'multi-line.html'
})
export class AppComponent { }
Run Code Online (Sandbox Code Playgroud)

连同multi-line.html:

<h1>My First Angular 2 multiline template</h1>
<p>Second line</p> 
Run Code Online (Sandbox Code Playgroud)

angular2-template angular

15
推荐指数
2
解决办法
4万
查看次数

如何使用npm以最少的必需文件启动Angular2项目?

我正在关注Angular2快速入门并使用Node包管理器安装所需的库:https://angular.io/guide/quickstart

创建了一个package.json:

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.0",
    "systemjs": "0.19.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10"
  },
  "devDependencies": {
    "concurrently": "^1.0.0",
    "lite-server": "^1.3.1",
    "typescript": "^1.7.3"
  }
Run Code Online (Sandbox Code Playgroud)

执行

npm install
Run Code Online (Sandbox Code Playgroud)

但是npm install命令下载了很多文件,例如"node_modules\angular2"是32MB(可能是原始资源和其他东西包括在内?),尽管index.html只需要少数几个,例如angular2.dev.js只有1MB:

<!-- 1. Load libraries -->
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
Run Code Online (Sandbox Code Playgroud)

我希望quickstart项目不占用这么多磁盘空间.有没有办法告诉npm只下载"捆绑包"或最小化版本,还是有办法在生产包装时优化node_modules目录?

javascript npm angular

14
推荐指数
1
解决办法
9064
查看次数

自定义angular2表单输入组件,在组件内部具有双向绑定和验证

有没有办法制作双向绑定输入组件,也可以在组件内部进行验证?

我想要实现的是有一个组件,我可以在我的表单中排列如下:

<form #f="ngForm">
            <my-form-input [(inputModel)]="name" [inputField]="myFormInputName"></my-form-input>
            <my-form-input [(inputModel)]="name2" [inputField]="myFormInputName2"></my-form-input>
...
            <my-form-input [(inputModel)]="lastItem" [inputField]="lastItemName"></my-form-input>

</form>
Run Code Online (Sandbox Code Playgroud)

我有以下设置,无法弄清楚,如何使其正确:

组件:

import {Component,Input, Output,EventEmitter} from 'angular2/core'
import {FORM_DIRECTIVES}    from 'angular2/common';

@Component({
  selector: 'my-form-input',
  directives: [FORM_DIRECTIVES],
  template:
    `
    <input type="text" class="form-control"  id="i1" required [ngModel]="inputModel" (ngModelChange)="onChangeInput($event)" ngControl="ctrl" #ctrl="ngForm"/>
    <p>{{"Is field valid? I would like to make some decisions here depending on that: "+ctrl.valid}}</p>

  `
})
export class InputComponent {

  constructor(){};

  @Input()  inputField:string;
  @Input()  inputModel: Object;
  @Output() inputModelChange = new EventEmitter();

  onChangeInput(event){
    this.inputModel=event;
    this.inputModelChange.emit(event);
  }
}
Run Code Online (Sandbox Code Playgroud)

该应用程序: …

angular2-forms angular2-template angular

14
推荐指数
1
解决办法
9813
查看次数

如何在Typescript中为Angular2编写console.log包装器?

有没有办法编写一个全局自制的mylogger函数,我可以在Angular2 typescript项目中使用我的服务或组件而不是console.log函数?

我想要的结果是这样的:

mylogger.ts

function mylogger(msg){
    console.log(msg);
};
Run Code Online (Sandbox Code Playgroud)

user.service.ts

import 'commons/mylogger';
export class UserService{
  loadUserData(){
    mylogger('About to get something');
    return 'something';
  };
};
Run Code Online (Sandbox Code Playgroud)

javascript typescript angular

6
推荐指数
2
解决办法
5万
查看次数

使用 Oracle PL/SQL XMLQUERY 和 XQuery 代替“EXTRACT(XML)”有什么优势

我注意到 Oracle EXTRACT(XML) 函数在 Oracle 11g 中已弃用。

我曾经通过以下方法进行 XML 处理:

DECLARE
  TYPE xmltype_table IS TABLE OF xmltype INDEX BY PLS_INTEGER;
  vt_xml_tab xmltype_table;
  v_xml      xmltype;
BEGIN
  --Generate simple XML document to pretend we received it by some interface
  SELECT xmltype(dbms_xmlgen.getxml('select level, dbms_random.random rnd from dual connect by level<1000')) INTO v_xml FROM dual;

  --Get nodes
  SELECT VALUE(xm) xmlt BULK COLLECT INTO vt_xml_tab FROM TABLE(xmlsequence(v_xml.extract('/ROWSET/ROW/LEVEL'))) xm;

  --Do whatever processing I like
  FOR i IN 1..vt_xml_tab.count LOOP
    dbms_output.put_line(vt_xml_tab(i).extract('LEVEL/text()').getstringval());
  END LOOP;
END;
/
Run Code Online (Sandbox Code Playgroud)

由于 EXTRACT …

xml oracle oracle11g oracle12c

6
推荐指数
1
解决办法
1068
查看次数