小编Den*_*ski的帖子

我在这里看到两个问题如何有条件地添加和删除项目上的属性(是否可以使用Angular2有条件地显示元素属性？)但我的问题是,是否可以添加和删除属性指令？我能够添加和删除属性,但Angular不会将该属性"编译"为属性指令,但该属性只是在那里无所事事.以下是2个标签的示例:

第一个是我试图有条件地应用属性指令而第二个有所有时间.

这是gif:

以下是我应用属性的方法(可能有不同的方法来应用属性指令？)

<h1 [attr.colored]="check ? '': null">Testing something</h1>

这是指令:

import {Directive, ElementRef} from '@angular/core'
@Directive({
    selector: '[colored]',
    host: {
        '(mouseenter)': 'onMouseEnter()',
        '(mouseleave)': 'onMouseLeave()'
    }
})

export class colorDirective {
    constructor(private el: ElementRef) {
    }
    onMouseEnter() { this.highlight("yellow"); }
    onMouseLeave() { this.highlight(null); }

    private highlight(color: string) {
        this.el.nativeElement.style.backgroundColor = color;
    }
}

编辑:有几个答案,但它们适用于AngularJS(1)

我正在尝试创建一个简单的示例项目来测试角度2更改检测机制:我在主索引页面上的脚本标记中创建一个纯javascript对象.它包含以下内容:

        var Tryout = {};
        Tryout.text = "Original text here";
        Tryout.printme = function(){
            console.log(Tryout.text);
        }
        Tryout.changeme = function(){
            Tryout.text = "Change was made";
        }

一个用于控制台登录的功能,另一个用于更改文本属性.

现在在Angular 2中,代码如下所示:

import {Component} from "angular2/core"

@Component({
    selector: 'my-app',
    template: `
        <h1>{{TryoutRef.text}}</h1>
        <input type="text" [(ngModel)]="TryoutRef.text">
        <button (click)="consoleLogMe()">Console Log</button>
        <button (click)="changeMe()">Change me inside</button>
    `
})

export class MyApp{

    TryoutRef:any = Tryout;
    constructor(){
    }
    changeMe(){
        this.TryoutRef.changeme();
    }
    consoleLogMe(){
        console.log(this.TryoutRef.text);
    }

}
declare var Tryout:string;

我想要做的是:当我通常使用onclick(完全在角度之外)调用函数Tryout.printme()时,我希望angular检测更改并更新屏幕.

我成功了这一点:当我从组件调用Tryout.printme()时(changeme()函数调用Tryout.printme()),Angular检测到更改并更新UI,这很好.此外,当我从外部角度更改并从Angular调用consoleLogMe()时,它会记录更改的文本并更新UI.

我想我需要在Angular以某种方式运行的同一区域中执行Tryout.changeme().有任何想法吗？我有一个很大的项目,它是在纯javascript/jquery中完成的,现在我慢慢地需要将把手模板重写为angular2组件而不触及模型(尚未).为此,我需要强制模型在与角度相同的区域中执行.

如果我想在Angular 1中执行类似的操作,我只需要$ scope.$ apply它可以工作.

这是示例中的gif:

如何在ngModel上监听更改？问题是:如果我将链接(更改)或(单击)事件链接到元素,则在访问模型时给定的函数中,它仍未更改.如果我添加500ms的setTimeout比我可以更改的模型.任何想法如何在没有setTimeout的情况下获得真正改变的对象,这是非常糟糕的方式？html中的代码:

<input type="checkbox" (click)="autoJoinToggle()" [(ngModel)]='active.bookmark.autoJoin'> Autojoin

组件中的代码:

 console.log(this.active.bookmark.autoJoin) // returns the current value (before the change)
 setTimeout(() => {console.log(this.active.bookmark.autoJoin);}, 500); //returns the value after the change

我无法使用Angular Control执行此操作,因为我需要绑定模型并且"活动"对象不存在于首位,如果我想在定义"active"之后更新控件的值,我需要监听更改在"活动"对象(更改加班).同样的问题是局部变量和@ViewChild - >我仍然需要知道"活动"何时更改,所以我也更新了局部变量.

这也是一个gif:

有没有人有使用NativeScript创建自动完成输入的经验？我尝试搜索现有示例，但似乎找不到任何信息？

任何人？

谢谢