Question

我正在阅读曼宁的《 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和ngOnInit是两个不同的指令，并且不会发生冲突或彼此替代。

您可以非常轻松地（手动）将@Input添加到生成的组件中，然后按照书中的内容继续操作。暂时不理会ngOnInit，直到您学会使用它为止。只要把它留在那里就不会有伤害。

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

还请注意，如果您的示例处理样式，则CLI生成了sccs，但书中包含css。 sccs从技术上应该占据所有css，并且应该可以正常工作。

Answer 2

@Input()是一个装饰器，用于将元数据添加到使属性写入其旁边的类 ，可用于数据绑定。

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

在Angular的当前版本中两者仍然存在，但如果它们为空（与constructor()方法相同）则没有实用程序，因此您可以通过以下方式替换所有代码：
import { Component } from '@angular/core'; @Component({ selector: 'app-summary', templateUrl: './summary.component.html', styleUrls: ['./summary.component.scss'] }) export class SummaryComponent { }

您始终可以随时添加它们。

Answer 3

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

OnInit是一个界面。它使您可以使用ngOnInit方法处理其他初始化任务，这在创建组件时会发生。

教程中的角度组件故障

3 个答案: