小编San*_*nde的帖子

Angular 2:如何在ES5中使用Http?

目前,我正在玩Angular 2.我尝试在ES5中使用Http,但无法使其正常工作.错误说"Http未定义".

这是我的代码:

function Service() {}
Service.prototype.greeting = function() {
  return 'Hello';
};

var Cmp = ng.
  Component({
    selector: 'cmp',
    providers: [Service],
    directives: [ng.NgFor],
    injectors: [ng.Http, ng.HTTP_PROVIDERS],
    templateUrl: 'hello.html'
  }).
  Class({
    constructor: [Service, function Cmp(service) {
      this.greeting = service.greeting();
      ng.Http.get('people.json');
    }],
  });

document.addEventListener('DOMContentLoaded', function() {
  ng.bootstrap(Cmp);
});
Run Code Online (Sandbox Code Playgroud)

任何人都可以帮我解决这个问题吗?谢谢.

angular

1
推荐指数
2
解决办法
1716
查看次数

Angular 2如何在内存中存储项目

我正在学习AngularJS2,并在他们的网站上遵循“我的英雄”教程,正在构建一个应用程序,并试图了解如何在内存中存储项目。

这是我的组件:

@Component({
  selector: 'my-warehouse',
  templateUrl: 'templates/warehouse.component.html',
  styleUrls:  ['css/warehouse.component.min.css']
})
export class WarehouseComponent {

    ingredients: Ingredient[] = [
        {"id": 100, "name": "Milk", "description": "White and delicious.", "quality": 0, "price": 10, "quantity": 20},
        {"id": 101, "name": "Cocoa", "description": "Ready to be processed into sweet chocolate.", "quality": 0, "price": 20, "quantity": 50},
        {"id": 102, "name": "Sugar", "description": "The magic behind the choco.", "quality": 0, "price": 5, "quantity": 10}
    ];

    constructor(
        private _router: Router,
        private _ingredientService: IngredientService){
    }

    addIngredient(){

        var ingr = jQuery.extend({}, …
Run Code Online (Sandbox Code Playgroud)

typescript angular

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

使用 DI 将窗口对象注入到 Angular 的组件中

我在我的应用程序中加载 socket.io,如下所示:

index.html
<script src="http://myapp.com/socket.io/socket.io.js"></script>
...
// Angular stuff
Run Code Online (Sandbox Code Playgroud)

我有一个Socket需要window.io工作的组件。

import { Injectable } from '@angular/core';
import { Events } from 'ionic-angular';

@Injectable()
export class Socket {

  public isConnected: boolean = false;

  constructor(public events: Events) {
    if (typeof window.io === "undefined") {
        throw new Error("Socket.io is undefined.");
    }

    this.io = window.io;
  }

  connect() {
    this.io.connect("...");
  }

  listen() {

  }

}
Run Code Online (Sandbox Code Playgroud)

从理论上讲,它可能有效(未测试),但将窗口范围内的内容注入类并不是一个好习惯。

有没有办法做到这一点:

import { SocketIODriver } from 'socket.io';
import { Socket } from 'App/Socket/Socket';

@Component({
   templateUrl: …
Run Code Online (Sandbox Code Playgroud)

ionic-framework ionic2 angular

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

Angular 2本地存储 - "没有导出成员"编译错误

在此先感谢您的帮助.我试图通过打字稿获取Angular 2中的本地存储访问.我正在使用npm包angular2-localstorage.我有angular.io"英雄之旅"的工作(没有太多的造型).我按照https://www.npmjs.com/package/angular2-localstorage上的说明进行操作.将建议的代码添加到我的app.module.ts文件后,我尝试运行npm start,并获得以下编译错误:

node_modules/angular2-localstorage/LocalStorageEmitter.ts(46,9): error TS2305: Module '"/Users/joshuaforman/Documents/CodeCraft/a2quickstart/a2-angular/node_modules/@angular/core/src/facade/lang"' has no exported member 'Type'.
node_modules/angular2-localstorage/LocalStorageEmitter.ts(47,9): error TS2305: Module '"/Users/joshuaforman/Documents/CodeCraft/a2quickstart/a2-angular/node_modules/@angular/core/src/di"' has no exported member 'provide'.
Run Code Online (Sandbox Code Playgroud)

您可以在此处查看所有代码:https://github.com/joshuaforman/angular2-quickstart

另外,这里是完整的app.module.ts文件(我改变的唯一一个导致错误发生的文件):

import { NgModule }       from "@angular/core";
import { BrowserModule }  from "@angular/platform-browser";
import { FormsModule }    from "@angular/forms";
import { HttpModule }    from "@angular/http";

// added for LocalStorage
// followed instructions here: https://www.npmjs.com/package/angular2-localstorage
import { LocalStorageService, LocalStorageSubscriber } from "angular2-localstorage/LocalStorageEmitter";

// Imports for loading & configuring the in-memory …
Run Code Online (Sandbox Code Playgroud)

typescript angular-local-storage angular

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

在 Ionic 项目中捏放大图片

我在 Ionic 上开发了一个项目。

在一个视图中,我搜索了捏缩放图片的可能性。

我试过hammer.js(http://hammerjs.github.io/)。捏合缩放有效,但缩放在图片的中心屏幕上,而不是在执行捏合的位置。另外,图片可能会从屏幕上消失......

那么,我如何在具有 Android/Ios 兼容性的图片(而不是画廊)上进行缩放。这是一个基本功能,它不是很受欢迎......

任何想法或教程?

image pinchzoom ionic-framework

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

Angular 2 无法更改 ngOnInit() 处的输入值

我需要在页面加载时更改输入的值。但是,我无法做到。这就是我在单独的 html 文件上创建输入的方法。

<form (submit)="some_function()">
<input (keypress)="some_function()" name="test" id="test-input" [(ngModel)]="test" [placeholder]="'NEED TO CHANGE INPUT TEXT' | translate"/>
<button type="submit">Submit </button>
Run Code Online (Sandbox Code Playgroud)

然后在 ts 文件中我有这样的内容:

ngOnInit() {

    var element = document.getElementById("test-input");
    // If I console.log(element) I actually get it.

    element.textContent = "INPUT TEXT CHANGED??";
    // If I console.log(element.textContent) I get the input with changed text... but I can't see it otherwise

}
Run Code Online (Sandbox Code Playgroud)

我在这里做错了什么?有什么帮助吗?

input angular

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

Angular 2 GET参数保持为空

嗨我想在GET请求中发送参数,但我的搜索参数仍为空,这是我的代码:

        private jwt2() {
        let currentUser = JSON.parse(localStorage.getItem('currentUser'));
        console.log('current.token ' + currentUser.token);

        let params: URLSearchParams = new URLSearchParams();        //PARAMS
        params.set('pageSize', '6');            //pageSize

        let headers = new Headers({ 'Authorization': currentUser });
        console.log("params: " + params);    //here I can see correct params

        return new RequestOptions({ headers: headers, search: params });
        //  }
    }
Run Code Online (Sandbox Code Playgroud)

我可以在chrome中看到正确的标题但不是搜索参数:

search
URLSearchParams
paramsMap
Map(0)
size(0)
__proto__
Map
[[Entries]]
Array(0)
length(0)
Run Code Online (Sandbox Code Playgroud)

如果我没有设置params并手动将param写入这样的搜索选项: return new RequestOptions({ headers: headers, search: 'pageSize=6' }); 它可以工作

typescript angular

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

是否可以在Ionic 3 CLI中创建Ionic 2项目

当我这样做时,我收到以下消息:

命令:

ionic start blank myapp --v2
Run Code Online (Sandbox Code Playgroud)

错误:

[错误]抱歉!--v1和--v2标志已被删除.使用--type选项.(ionic start --help)对于Ionic Angular项目,尝试离子启动空白myapp --type = ionic-angular

我的Ionic CLI版本是:

ionic -v
3.3.0
Run Code Online (Sandbox Code Playgroud)

ionic-framework ionic2

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

带有angular4的jQueryUI

我试图将自定义的jqueryUI datepicker组件添加到angular4项目.目前我用普通的jquery,html和css开发了.我想将该组件添加到angular4.我尝试过如下,但是当运行npm start时会出错.

我的jquery ui datepicker(自定义为rangepicker)

在此输入图像描述

这是我将jqueryUI导入angular4的方法

 "apps": [
{
  "root": "src",
  "outDir": "dist",
  "assets": [
    "assets",
    "favicon.ico"
  ],
  "index": "index.html",
  "main": "main.ts",
  "polyfills": "polyfills.ts",
  "test": "test.ts",
  "tsconfig": "tsconfig.app.json",
  "testTsconfig": "tsconfig.spec.json",
  "prefix": "app",
  "styles": [
    "styles.css",
    "../node_modules/jquery-ui/../themes/base/all.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": ["../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/jqueryui/jquery-ui.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"],
  "environmentSource": "environments/environment.ts",
  "environments": {
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"
  }
}
Run Code Online (Sandbox Code Playgroud)

]

这是我在命令提示符中得到的错误

在此输入图像描述

jquery-ui angular

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

angular2 - 检查用户登录

我开始学习有关角度2的所有内容,目前有问题.我在我的应用程序中定义了这些路由:

const appRoutes: Routes = [
  {path: 'start',
    component: StartComponent,
    children:[{path: '' },
      {
        path:'nested', component:NestedTestComponent
      }
    ]},
  {path: '', component:LoginFormComponent}
];
Run Code Online (Sandbox Code Playgroud)

在用户输入凭证(并且它们是正确的)之后,存在显示登录表单的"基本"路径,用户将被定向到"开始"并且这被作为嵌套路由"嵌套".这非常有效.但是如果用户没有登录,我想以某种方式限制用户访问"开始"和"嵌套".因为目前只需将其作为URL输入即可.

我的index.html看起来像这样:

<body>
  <app-root>Loading...</app-root>
</body>
Run Code Online (Sandbox Code Playgroud)

app.component:

@Component({
  selector: "app-root",
  template: `
        <router-outlet></router-outlet>
        `,
  styleUrls: ['./app.component.css']
})
Run Code Online (Sandbox Code Playgroud)

start.component

<nav>
    <div class="nav-wrapper">
      <a href="#" class="brand-logo center"></a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li><a (click)="logout()">Logout</a></li>
      </ul>
    </div>
  </nav>
  <router-outlet></router-outlet>
Run Code Online (Sandbox Code Playgroud)

因为一切都以某种方式嵌套在我的方法中是检查app.component,如果用户使用以下方式登录:

export class AppComponent {



  constructor(af:AngularFire, router:Router){
    if(af.auth.getAuth() == null){
      //redirect to start
      console.log('redirect to login');
      router.navigate(['']);
    }else{
      console.log('not redirect to login');
    }
  } …
Run Code Online (Sandbox Code Playgroud)

angular2-routing angular

0
推荐指数
1
解决办法
3987
查看次数

Angular 4 min js文件大小

Angular4(或现在只是Angular)的.min.js文件大小是多少?我找不到有关此的任何信息。

我正在比较Vue 2.0和Angular 4,它的文件大小只是其中的一点。

vue.min.js(v.2.2.6)75kb

622kb用于angular2.min.js(v.2.0.0-beta.17)(这并不是我想要的)

编辑:由于有些人理解错误的问题:我不试图获得最小的捆绑包!我要寻找的是没有任何编译器的vanilla min.js文件的大小

filesize vue.js angular

0
推荐指数
1
解决办法
4911
查看次数

cellClicked不要调用函数AgGrid Angular 2

我想在单元格中“单击”并显示console.log,但是此功能无法运行:

  headerName: 'Id',
  field: 'id',
  cellClicked: function() {
          console.log('asssaasas');
  }
Run Code Online (Sandbox Code Playgroud)

我确实在单元格中单击了AgGRID,但是在html5.console中我什么也没显示。

ag-grid angular

0
推荐指数
1
解决办法
2077
查看次数

对象数组的表单控件

{ 
    id: 123,
    email: "abc@gmail.com",
    password: 108,
    myObj:[
    { id:1, name:"abc", age: 20 },
    { id:2, name:"def", age: 21 },
    { id:3, name:"ghi", age: 22 },
    { id:4, name:"jkl", age: 23 } ] 
}
Run Code Online (Sandbox Code Playgroud)

这就是我从服务器获取要修补的字段的方式,我像这样修补它们:

this.myForm = this.fb.group({
    id: [],
    email: [],
    password: [],
    myObj: [] 
}); 
Run Code Online (Sandbox Code Playgroud)

我需要每个myObj数组都是一个单独的表单控件。我尝试以不同的方式从 HTML 访问它们(例如formControlName = myObj[0]formControlName = myObj.name ),但没有成功。

如何访问myObjHTML 中的字段?

html typescript primeng angular

0
推荐指数
1
解决办法
3067
查看次数