教程中的 Angular 组件问题

Posted 2023-03-13

【中文标题】教程中的 Angular 组件问题

【英文标题】：Trouble with Angular Component in Tutorial

【发布时间】：2019-05-26 11:44:17

【问题描述】：

我正在阅读 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”的做事方式？

【问题讨论】：

是的，我试过出版商为这本书提供的留言板。没人在家。

我刚刚检查了这本书。第 42 页第一行是：@Input() stock: any;

【参考方案1】：

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

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

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

另外请注意，如果您的示例处理样式，则 CLI 生成了 sccs，但本书生成了 css。从技术上讲，sccs 应该会占用所有 css 并且应该可以正常工作。

【参考方案2】：

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

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

两者仍然存在于当前版本的 Angular 中，但如果它们为空则没有实用程序（constructor() 方法相同），因此您可以将所有代码替换为：

import  Component  from '@angular/core';

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

export class SummaryComponent  

您可以随时添加它们。

【参考方案3】：

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

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