相关疑难解决方法(0)

$scope.$apply 将不再是Angular 2的一部分.那么,如果在常规角度执行上下文之外更改了任何绑定属性,我们如何让Angular知道更新DOM？

摘自Minko Gechev的博客文章:

没有更多$ scope.$ apply

但是AngularJS怎么知道它的执行环境之外的任何东西都取而代之？让我们思考一下变化的来源:

• 的setTimeout
• 的setInterval
• 提示(是的,有人还在使用它......)
• XMLHttpRequest的

• 的WebSockets

• ...

答案是:

我知道修补浏览器内置的javascript函数以通知Angular的任何更改都可以以相对安全的方式完成(不会引入细微的错误)并且对开发人员来说非常方便.但是第三方API(例如jQuery.fadeIn)或浏览器是否公开了一些未涵盖的新异步API呢？什么是旧的替代品$scope.$apply？

我想能够在angular2之外的变量发生变化时观察和更新.所以,假设我在外部javascript文件中有这个:

var test = 1;

如何将此变量绑定到组件中的属性？

@Component({
   ...
})

export class MyComponent {
    watchy = window.test;
}

根据这个答案,显然这应该是有用的.
但事实并非如此.如果我在控制台中更改变量,则变量不会更新显示在模板中.我错过了什么吗？

我有一个简单的表单,其输入字段与指令相关联:

<form id="scrollable-dropdown-menu">
  <input class="input-field" name="value" [someDirective] type="text"  [(ngModel)]="value" #query="ngModel" />
  <button (click)="onPost(query.value)" type="submit">Search</button>
</form>

该指令通过使用第三方库来更改输入字段.在我的特定情况下,这是一个autocomplete/typeahead Jquery插件.此插件为用户提供选项,选择选项后,它会更改输入字段的值.

但是,Angular不会更新其属性query.value,因此会将旧值传递给onPost方法.

该指令看起来像这样:

@Directive({
    selector: '[someDirective]',
})
export class MyDirective  {
     constructor(private elRef: ElementRef, private renderer: Renderer) {
         // this changes the value of the field if the user selects an option
         $('.input-field').plugin(); 
     }

}

我被建议使用UpdateValue,但我看不到如何在指令中使用它.这导致我看看@ViewChild,但它似乎不适用于指令,虽然我可能会弄错.

我也尝试通过注入来强制更新ChangeDetectorRef,但我没有看到任何区别.这就是我做的:

my.directive.ts

import {ChangeDetectorRef} from '@angular/core';
@Directive({
    selector: '[someDirective]',
})
export class MyDirective  {
    constructor(private elRef: ElementRef, private renderer: Renderer, private detectorRef: …

我正在使用带有模板语法的TabView组件来迭代它并在其中添加项目(使用可观察的集合和异步管道).我的商品来自http请求.

我的home.component.tns.html如下:

<ActionBar title="Angular 2 Seed Advanced (nativescript)">
</ActionBar>
<StackLayout>
  <TabView selectedIndex="0" selectedColor="#FF0000">
    <template ngFor let-tab [ngForOf]="tabs | async">
      <StackLayout *tabItem="tab">
          <Label text="tab item"></Label>
      </StackLayout>
    </template>
  </TabView>

  <Button text="call something" (tap)="emptymethod()"></Button>

</StackLayout>

...和我的home.component.ts:

...
    export class HomeComponent{

        public tabs: Observable<any[]>;

        constructor(private _menuService: MenuService) {

            this._menuService.getMenu()
                .map((menus) => {
                    let result: Array<any> = [];

                    if (menus) {
                        menus.forEach(menu => {
                            result.push({ 'title': menu.title });
                        });
                    }
                    return result;
                })
                .subscribe(
                data => {
                    this.tabs = Observable.of<any[]>(data);
                },
                error => error => …