相关疑难解决方法(0)

@HostBinding和@HostListener:他们做了什么,他们有什么用?

在我的蜿蜒环绕世界各地的interweb,现在特别是angular.io风格的文档,我发现许多引用@HostBinding@HostListener.看起来它们非常基础,但不幸的是,目前它们的文档有点粗略.

任何人都可以解释它们是什么,它们如何工作并举例说明它们的用法?

angular-services angular

166
推荐指数
9
解决办法
13万
查看次数

访问基类成员

请参阅TypeScript站点上playground的继承示例:

class Animal {
    public name;
    constructor(name) { 
        this.name = name;
    }
    move(meters) {
        alert(this.name + " moved " + meters + "m.");
    }
}

class Snake extends Animal {
    constructor(name) { super(name); }
    move() {
        alert("Slithering...");
        super.move(5);
    }
}

class Horse extends Animal {
    constructor( name) { super(name); }
    move() {
        alert(super.name + " is Galloping...");
        super.move(45);
    }
}

var sam = new Snake("Sammy the Python")
var tom: Animal = new Horse("Tommy the Palomino")

sam.move()
tom.move(34)
Run Code Online (Sandbox Code Playgroud)

我更改了一行代码:警报Horse.move().我想访问 …

typescript

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

带箭头功能的ES6 getter/setter

我正在使用babel6和我的宠物项目我正在为XMLHttpRequest创建一个包装器,我可以使用的方法:

open = (method, url, something) => {
  return this.xhr.open(method, url, something);
}
Run Code Online (Sandbox Code Playgroud)

但对于属性箭头功能不起作用

这工作:

get status() { return this.xhr.status; }
Run Code Online (Sandbox Code Playgroud)

但我不能用

get status = () => this.xhr.status;
Run Code Online (Sandbox Code Playgroud)

这是故意的吗?

ecmascript-6 babeljs

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

是否可以在TypeScript接口中使用getter/setter?

我想定义一个具有readonly属性的接口.例如;

interface foo {
    get bar():bool;
}
Run Code Online (Sandbox Code Playgroud)

但是,这会在语法上出现语法错误"expected';'".我已将VisualStudio设置为使用ES5目标,因此支持getter.这是接口的限制吗?未来可能会发生这种变化; 这是一件非常好的事情.

typescript

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

在Visual Studio中使用TypeScript定位ES5

我想在Visual Studio Express for Web中的TypeScript中使用get/set语法.我该如何启用它.编译时我目前收到此错误;

属性访问者仅在定位ES5或更高版本时可用

正在编译的文件具有构建操作TypeScriptCompile.我不知道如何在Visual Studio中添加必要的编译器开关.

任何帮助,将不胜感激.

typescript

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

什么是angular2中的多提供者

我知道提供者是从另一个类获得服务但是什么是多提供者和令牌的东西?

还有什么时候multi=true呢?

provide(NG_VALIDATORS, { useExisting: class),    multi: true })
Run Code Online (Sandbox Code Playgroud)

angular2-forms angular2-directives angular2-services angular

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

Angular2 - 订阅服务变量更改

我有一个身份验证服务,使经过身份验证的变量等于true或false.

checkAuthentication(){
  this._authService.getAuthentication()
    .subscribe(value => this.authenticated = value);
}
Run Code Online (Sandbox Code Playgroud)

如何this.authenticated更改值时如何执行函数?ngOnChanges没有发现变化.

typescript angular

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

Angular 2:如何使用getter和setter方法将Input属性绑定到model属性?

我正在制作一个Angular 2网络应用程序.我有一个由几个关键属性组成的模型,然后是基于这些关键值计算的其他几个属性.

我的所有属性都有getter方法.为了使我的计算属性与我的键属性保持同步,通过setter方法更改键属性,这些方法重新计算所有计算属性.这是一个简化的例子:

export class Model{
    private _keyValue: number;
    private _computedValue: number;

    getKeyValue(): number{
        return this._keyValue;
    }

    setKeyValue(value: number){
        this._keyValue = value;
        this.evaluateComputedValues(); // This might be time-consuming
    }

    getComputedValue(): number{
        return this._computedValue;
    }
}
Run Code Online (Sandbox Code Playgroud)

这使我的模型保持一致:每次更改其中一个关键属性时,都会重新计算所有计算属性.

现在我需要弄清楚如何将我的属性绑定到组件视图.看起来我可以使用插值来呈现计算属性的getters:

<div>{{model.getComputedValue()}}</div>
Run Code Online (Sandbox Code Playgroud)

但是,我不确定将我的键属性绑定到输入字段的最佳方法是什么.使用双向绑定的所有示例似乎都使用这样的ngModel:

<input [(ngModel)]='model.property'>
Run Code Online (Sandbox Code Playgroud)

但是,这似乎是为了绑定到简单的属性.理想情况下,我需要使用单独的getter和setter方法(getKeyValue和setKeyValue)进行双向绑定.

在Angular 2中有没有内置的方法来实现这一点?

typescript angular

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

typescript readonly类的属性

我注意到typescript 2.0将支持readonly类属性,但它尚不可用.这篇文章的原因是我希望能够明智地知道我今天如何编写代码,以便以后可以轻松过渡.

我想以这种方式使用具有只读属性的类:

let widget = new Widget(110, 220); // width, height
//...
widget.width(200); // to modify the width, I use a setter with validation
widget.width = 300; // note: I want this to be a compile time error
//...
let w = widget.width; // and later I want to get/draw the current width
Run Code Online (Sandbox Code Playgroud)

...但由于fn和属性具有相同的名称,我无法使其工作 - 所以我将fn名称切换为setWidth.我宁愿不用_前缀所有readonly属性,因为在过去我发现痛苦不仅仅是键入额外字符的麻烦.由于TS的类型检查,我不需要视觉提醒,该属性是只读(或私有).

Q1:如果width是widget类的readonly属性,那么上面的工作在typescript 2中会如下所示吗?

export class widget {
    readonly width:number;  // doesn't work in TS 1.8

    setWidth(w:number) {
        this.width = w;
    }
}
Run Code Online (Sandbox Code Playgroud)

在短期内,我可以将该属性公开,以便我可以直接访问,具有我可能直接设置属性的"风险" - …

typescript

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

使用Typescript延迟加载模式

因此,使用C#和其他语言,您可以在属性上获取和设置评估器,构建延迟加载模式非常简单.

我最近才开始玩Type Script而且我正在努力实现同样的目标.我正在通过Ajax Call加载Poco的大部分属性.问题可以描述如下:

export interface IDeferredObject<T> {
    HasLoaded: boolean;
    DeferredURI: string;         
}

export class Library{        

    LibraryName: string;
    Books: IDeferredObject<Book[]>;        
}   

export class Book {
    Title: string;
    UniqueNumber: number;
}



window.onload = () => {
    //Instantiate new Library
    var lib = new Library();

    //Set some properties
    lib.LibraryName = "Some Library";

    //Set the Deferred URI Rest EndPoint
    lib.Books.DeferredURI = "http://somerestendpoint";
    lib.Books.HasLoaded;      



    //Something will trigger a  GET to lib.Books which then needs to load using the Deferred Uri       

};
Run Code Online (Sandbox Code Playgroud)

几个问题:我

  • 接口在这里使用是否正确?
  • 当某些内容访问Library …

javascript design-patterns lazy-loading typescript

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