Проблема с угловым компонентом в учебнике

Question

Я читаю Angular в действии от Мэннинга.Глава 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, посмотрите здесь

Также обратите внимание, если ваш пример имеет дело сстилей, то 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, который происходит при создании компонента.