angular - Angular 2中服务和模型之间的区别?

标签 angular typescript

我正在探索 Angular2,我在互联网上找到了一个快速启动项目来了解结构。我在另一个文件夹中有三个文件夹:components、services 和 models。 我了解什么是组件,并且我了解服务是我希望持久保存数据的单例。

问题是我在服务文件夹中有这个文件:

import {Injectable} from "@angular/core";
import {Task} from "../models/task";

@Injectable()
export class TaskService {

    private tasks:Array<Task> = [
        new Task("Task 1", false),
        new Task("Task 2", false),
        new Task("Task 3", false),
    ];

    getTasks():Array<Task> {
        return this.tasks;
    }

    addTask(name:string) {
        this.tasks.push(new Task(name, false));
    }

}

我在模型文件夹中有这个:

export class Task {

    constructor(public name:string, public done:boolean) {
    }

    toggleDone() {
        this.done = !this.done;
    }
}

但我不确定为什么将 Task 视为模型而将 TaskService 视为服务。 是因为我可以有多个任务实例吗?如果是这样,那么我可以拥有多个 TaskService 实例并且不是单例吗?如果不是,编译器怎么知道什么时候是服务,什么时候是模型?因为后缀?

谢谢。

最佳答案

@Injectable is the answer

我们注册了一个可注入(inject)类,我们不必实例化它!

我们在应用程序模块中将其注册为提供者,在我们的组件中将其注册为提供者,嘿,很快你就会得到注入(inject),直接的魔法,感谢 Angular,你是个 boi。

而且,现在我们的组件甚至不必知道有关 Task 类的任何信息 - 它已经包含在我们的 Injectable 服务中。

关于angular - Angular 2中服务和模型之间的区别?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41840953/

相关文章:

node.js - Angular 7/8 - 如何在应用程序组件中获取 url 参数

typescript - 将 1 个对象结构推理为另一个对象结构的高级 typescript

rest - Angular 2 Spring Security CSRF token

Angular - routerLink 和状态的问题

angular - 带有货币的 PrimeNG p-inputNumber 不会强制仅使用移动设备输入数字

javascript - rxjs__WEBPACK_IMPORTED_MODULE_1__.Observable.throw 不是函数

Angular - 在另一个组件中动态注入(inject)一个组件

angular - 多个 canActivate 守卫在第一次失败时全部运行

javascript - 在滚动上触发事件类,没有 Jquery 的 Angular 5

javascript - Angular Material 树 - 样式可能性