如何订阅 Angular 组件中的服务？

Question

我对如何订阅 Angular 组件中的服务有一个争论。

我得到了以下想法：

1）在构造函数中订阅 该解决方案似乎性能更高，因为构造函数比 onInit 生命周期方法运行得更快一些。仍处于施工阶段，该物体尚未稳定。

export class App implements OnInit {

    lessons$: Observable<Lesson[]>;

    constructor(private lessonsService: LessonsService) {
        this.lessons$ = this.lessonsService.loadLessons().subscribe(
            () => console.log('lessons loaded'),
            console.error
        )
    }
}

2）在onInit中订阅 该解决方案似乎无论如何都很稳定，但性能较差。

export class App implements OnInit {

    lessons$: Observable<Lesson[]>;

    constructor(private lessonsService: LessonsService) {}

    ngOnInit() {
        this.lessons$ = this.lessonsService.loadLessons().subscribe(
            () => console.log('lessons loaded'),
            console.error
        )
    }
}

我也发现了以下内容：

使用 ngOnInit 进行订阅是一个很好的实践，因为 @Input 绑定直到这个生命周期钩子才被初始化，所以它们在构造函数中还没有准备好，并且通常可观察对象可以依赖于这些值。

我得到一个建议，出于性能考虑，应在构造函数中进行不依赖于 @Input 的订阅。

以下内容看起来太丑陋且不一致：

export class App implements OnInit {

    lesson$: Observable<Lesson>;
    lessons$: Observable<Lesson[]>;
    @Inpout() id: string;

    constructor(private lessonsService: LessonsService) {
        this.lessons$ = this.lessonsService.loadLessons().subscribe(
            () => console.log('lessons loaded'),
            console.error
        )
    }

    ngOnInit(private lessonsService: LessonsService) {
        this.lesson$ = this.lessonsService.loadLessonById(this.id).subscribe(
            () => console.log('lesson loaded'),
            console.error
        )
    }
}

您能帮我找到正确的解决方案吗？

我搜索了参考资料，只找到了有关建议 onInit 订阅的文章，但是我没有找到任何比较这两种方式的文章。

Answer 1

在 99.9999% 的情况下，你在哪里编写它并不重要（如果你的服务订阅肯定不依赖于

Input

）。因为constructor和ngOnInit都是同步执行的。因此，如果您的服务有一些同步繁重的计算，那么无论您是否在构造函数中调用服务，您的渲染都将同时完成，因为 DOM 更新将在所有这些执行完成后应用。

我能看到的唯一可能有区别的是，例如如果您的 ngOnChanges 计算量很大（第一个 ngOnChanges 在构造函数之后但在 ngOnInit 之前执行）那么如果您要调用在构造函数中进行 http 调用的服务，具体取决于不同浏览器处理 http 调用的方式，它可能会立即开始异步向服务器发出请求当你的 ngOnChanges 运行时，然后当 ngOnInit 启动时，你的请求可能已经完成了一半，所以你可能会看到差异。

但是如果您在构造函数/ngOnInit 之间有一些繁重的计算同步内容，则应该是这种情况，否则在常见情况下，执行时间差异以毫秒为单位，这肯定没有人会感觉到。但这种影响用户体验的计算通常会转移到 WebWorkers 或在单独线程中运行的东西，以免阻塞页面。

因此，除了与同事讨论之外，这些微观优化并不重要。

对于我来说，我只是倾向于编写更少的代码，所以如果您已经有用于注入的构造函数，那么只需将它用于您的初始化代码，而不是创建一个像

ngOnInit

这样的类方法。如果您需要输入的初始值，那么您别无选择，只能使用

ngOnOnit

。只要保持简单，你永远不会注意到差异