时间戳

首页 > 解决方案 > 教程中的 Angular 组件问题

angular - 教程中的 Angular 组件问题

问题描述

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

标签： angulartypescriptangular-cliangular-componentsangular7

解决方案

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

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

如果你想知道是什么ngOnInit，看这里

另请注意，如果您的示例处理样式，则 CLI 已生成sccs，但本书具有css. sccs应该在技术上采取一切css，应该只是工作。

推荐阅读