教程中的 Angular 组件有问题

Question

我正在阅读 Manning 的 Angular in Action。第 2 章向我展示了如何编写我的第一个组件，但该示例已过时。我不知道如何更新它。我正在使用 Angular CLI 版本 7.1.3。

Angular CLI 生成这个：

import { Component, OnInit } from '@angular/core';
@Component({
    selector: 'app-summary',
    templateUrl: './summary.component.html',
    styleUrls: ['./summary.component.scss']
})
export class SummaryComponent implements OnInit {
    constructor() { }
    ngOnInit() {
    }
}

本书假设 Angular CLI 会生成这个：

import { Component, Input } from '@angular/core';
@Component({
  selector: 'summary',
  styleUrls: ['./summary.component.css'],
  templateUrl: './summary.component.html'
})
export class SummaryComponent {
  @Input();
}

@Input和OnInit有什么区别？一个人如何将输入示例转化为 "OnInit" 做事方式？

Answer 1

@Input 是装饰器。它允许您将字段标记为输入参数。例如，您可以将参数从父组件传递到子组件。

OnInit是一个接口。它允许您在 ngOnInit 方法下处理额外的初始化任务，该方法发生在组件创建时。

Answer 2

@Input 和 ngOnInit 是两个不同的指令，不会相互冲突或替代。

您可以很容易地（手动）将 @Input 添加到生成的组件中，然后按照书中的说明继续操作。暂时忽略 ngOnInit 直到你学会使用它。把它放在那里不会有什么坏处。

如果您想知道 ngOnInit 的作用，请查看 here

另请注意，如果您的示例处理样式，则 CLI 已生成 sccs，但书中有 css。 sccs 从技术上讲应该可以全部使用 css 并且应该可以正常工作。

Answer 3

@Input() 是一个装饰器，它向 class 添加元数据，使得属性、 将被写在它旁边 ， 可用于数据绑定。

ngOnInit() 是 生命周期挂钩 ，Angular 在创建组件后不久调用。

两者在 Angular 的当前版本中仍然存在，但如果它们为空则没有实用性 （与 constructor() 方法相同） 所以你可以通过以下方式替换您的所有代码：

import { Component } from '@angular/core';

@Component({
    selector: 'app-summary',
    templateUrl: './summary.component.html',
    styleUrls: ['./summary.component.scss']
})

export class SummaryComponent  {

}

您随时可以添加它们。

教程中的 Angular 组件有问题

Trouble with Angular Component in Tutorial

typescript

angular-cli

angular-components

angular

angular7