标签: angular

在AngularJS中,我可以使用ng-model选项去抖模型.

ng-model-options="{ debounce: 1000 }"

如何在Angular中去抖模型？我试图在文档中搜索debounce,但我找不到任何东西.

https://angular.io/search/#stq=debounce&stp=1

一个解决方案是编写我自己的去抖函数,例如:

import {Component, Template, bootstrap} from 'angular2/angular2';

// Annotation section
@Component({
  selector: 'my-app'
})
@Template({
  url: 'app.html'
})
// Component controller
class MyAppComponent {
  constructor() {
    this.firstName = 'Name';
  }

  changed($event, el){
    console.log("changes", this.name, el.value);
    this.name = el.value;
  }

  firstNameChanged($event, first){
    if (this.timeoutId) window.clearTimeout(this.timeoutID);
    this.timeoutID = window.setTimeout(() => {
        this.firstName = first.value;
    }, 250)
  }

}
bootstrap(MyAppComponent);

而我的HTML

<input type=text [value]="firstName" #first (keyup)="firstNameChanged($event, first)">

但是我正在寻找一个内置函数,Angular中有一个吗？

除了手动编辑文件夹名称,.css,.ts,spec.ts和app.module.ts等所有组件文件之外,是否有任何使用Angular CLI重命名组件的快捷方式？

几个月前,我决定研究Angular.当我做一些进步并使用它创建一些应用程序时,我意识到Angular 2处于开发人员预览中,因此它将在它发布之前的时间问题.因为Angular 2不会与Angular 1兼容,并且有很多变化,问题是,继续使用Angular 1.x开发还是开始开发Angular 2会更好吗？

事实上,我们并不总是必须使用市场上的最新版本或最新语言,但在这种情况下,应用程序仍然很小,所以我可以毫无问题地进行更改.

是否可以在Angular 2路线中有一个可选的路线参数？我在RouteConfig中尝试了Angular 1.x语法但收到了以下错误:

"ORIGINAL EXCEPTION:Path"/ user /:id？"包含"？",这在路由配置中是不允许的."

@RouteConfig([
{
    path: '/user/:id?',
    component: User,
    as: 'User'
}])

我是没有AngularJS经验的Angular 2的新手,并且正在编写一个涉及设置iframe src属性的教程:

<iframe width="100%" height="300" src="{{video.url}}"></iframe>

这引发了一个异常:

Error: unsafe value used in a resource URL context
at DomSanitizationServiceImpl.sanitize...

我已经尝试过使用绑定但iframe没有成功.我可能错过了一些东西,我很难找到解决方案.

这是我的代码:

import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';

logIn(username: string, password: string) {
    const url = 'http://server.com/index.php';
    const body = JSON.stringify({username: username,
                                 password: password});
    const headers = new HttpHeaders();
    headers.set('Content-Type', 'application/json; charset=utf-8');
    this.http.post(url, body, {headers: headers}).subscribe(
        (data) => {
            console.log(data);
        },
        (err: HttpErrorResponse) => {
            if (err.error instanceof Error) {
                console.log('Client-side error occured.');
            } else {
                console.log('Server-side error occured.');
            }
        }
    );
}

在这里网络调试:

Request Method:POST
Status Code:200 OK
Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate
Accept-Language:en-US,en;q=0.8
Cache-Control:no-cache
Connection:keep-alive
Content-Length:46
Content-Type:text/plain …

在Angular中,我可能有一个看起来像这样的表单:

<ng-form>
    <label>First Name</label>
    <input type="text" ng-model="model.first_name">

    <label>Last Name</label>
    <input type="text" ng-model="model.last_name">
</ng-form>

在相应的控制器中,我可以轻松地观察对该表单内容的更改,如下所示:

function($scope) {

    $scope.model = {};

    $scope.$watch('model', () => {
        // Model has updated
    }, true);

}

这是JSFiddle上的一个Angular示例.

我无法弄清楚如何在Angular中完成同样的事情.显然,我们不再拥有$scope$ rootScope.当然有一种方法可以实现同样的目的吗？

这是一个关于Plunker的Angular示例.

这让我疯了,我在枪下,无法再花上一整天的时间.

我试图在组件中手动设置一个控制值('dept'),它只是不工作 - 甚至新值记录到控制台正常.

这是FormBuilder实例:

initForm() {
  this.form = this.fb.group({
    'name': ['', Validators.required],
    'dept': ['', Validators.required],
    'description': ['', Validators.required],
  });
}

这是接收选定部门的事件处理程序:

deptSelected(selected: { id: string; text: string }) {
  console.log(selected) // Shows proper selection!

  // This is how I am trying to set the value
  this.form.controls['dept'].value = selected.id;
}

现在,当表单提交并且我注销时,this.form该字段仍然是空白的!我已经看过其他用户,updateValue()但这是beta.1,我不认为这是调用控件的有效方法.

我也试图打电话updateValueAndValidity()没有成功:(.

我只是ngControl="dept"在表单元素上使用,就像我正在使用表单的其余部分,但它是一个自定义指令/组件.

<ng-select
  [data]="dept"
  [multiple]="false"
  [items]="depts"
  (selected)="deptSelected($event)" <!-- This is how the value gets to me -->
  [placeholder]="'No Dept Selected'"></ng-select>

我收到了这个错误

角度编译器中的错误需要TypeScript> = 3.1.1和<3.2.0,但是找到了3.2.1.

看起来像Typescript已更新,但Angular Compiler不喜欢这样.

我该如何解决？

我需要在浏览器的会话中存储数据并检索数据,直到会话退出.如何在Angular 2中使用本地和会话存储？