Angular компоненты чем отличается конструктор от ngOnInit


Содержание материала:

angular 2 приложения компонент конструктора и ngoninit не называется

Привет я новичок в угловых 2 мировой

я использую угловой «2.0.0-бета.0»

у меня ботинок.файл TS

и я AppComponent

Шаблон AppComponent в формате HTML

когда я открываю консоль там нет сообщений от конструктора или почек ngOnInit root по умолчанию, как вы можете видеть выше в файл AppComponent и нет ошибок в консоли

почему нет сообщения консоли.журнал(«appComponent загружен»)

я проверил ответ, и не работает для меня

Директива @в @компонентов в угловой

angular — используют трубы служб и компонентов

angular 2 ngoninit не называется

angular html-код привязки

angular нг-повторять ошибки “дубликаты в репитер не допускаются”.

в angularjs : предотвратить ошибки $дайджест уже в момент вызова $объем.$применить()

разница между конструктором и ngoninit

how to bundle an angular app for production

огромное количество файлов, генерируемых для каждой angular проект

ngoninit не называют, когда инъекционный class инстанцируют

в чем разница между угловыми маршрута и angular пользовательского интерфейса маршрутизатора?

© 2020 — Вопросы и ответы по программированию

Angular 2 инициализирует вложенный компонент раньше ngOnInit?

Добрейшего вечерочка.
Сразу к делу.
Есть компонент main, который реализует OnInit, в котором идет обращение к серверу, и полученный массив данных записывается в переменную products компонента. Вроде четко и ясно.
main имеет разметку типа:

Абстрагируемся от того, что данные с сервера могут не придти или их кол-во будет меньше 3. Не обращаем на это внимание.

Так вот. Компонент product тоже реализует OnInit. Сейчас, запуская подобный код и получаю такую фигню в логах.

1) main — controller
2) product — controller Вопрос задан более двух лет назад

  • 566 просмотров
  • AngularJS vs Angular 2: ключевые различия

    Мы в команде Web Development компании Itransition уже имеем хороший опыт разработки на Angular 2 и хотим им поделиться.

    Эта статья ориентирована на тех крутых ребят, которые разрабатывают на Angular и подумывают перейти на вторую его версию.

    Стоит ли начинать новый проект на Angular 2?

    Однозначно – да! И вот почему:

    • Это грамотно и тщательно спроектированный, высокопроизводительный фреймворк;
    • С более низким порогом вхождения по сравнению с первой его версией;
    • С хорошей документацией с большим количеством практических примеров.

    Начало нового проекта

    Наконец-то глоток свежего воздуха, полная свобода, можно начать всё с чистого листа. Хорошенько проработать архитектуру, структуру данных, компоненты, различные абстракции, составить некий словарь терминов приложения и так далее. Чтобы всё было красиво.

    Свобода действий

    Но с первой версией Angular не всё так просто. Нужно чтобы всё придуманное ложилось на реалии фреймворка, его модули и сервисы строго определенного типа. Нельзя просто так взять и аккуратно создать некий класс или компонент, который будет делать что-то важное. Нужно решить, чем этот компонент будет с точки зрения фреймворка? Каким типом сервиса: «value», «constant» или всё же «factory»? А может быть сервис типа «service»? Ведь он создаёт объект с оператором new, вроде бы это то, что нужно. А вдруг синглтона будет недостаточно? И эти вопросы возникают практически всегда, работая с Angular, в подобных ситуациях, и нет на них однозначного ответа.

    Отсутствие подобного рода ограничений со стороны фреймворка, на мой взгляд, сильное преимуществом Angular 2. Можно использовать любую удобную модульную систему, как угодно называть и подключать произвольный код.

    Генератор кода

    Далее для начала работы над проектом необходимо:

    • создать файловую структуру приложения,
    • наладить работу с шаблонами,
    • наладить работу со стилями, препроцессором,
    • настроить сборку для разработки, отладки, продакшена,
    • настроить процесс тестирования,

    Со второй версией фреймворка мы получаем инструмент командной строки, с которым можно генерировать приложения, модули, компоненты, директивы, сервисы, фильтры (pipe – новое их название), запускать тесты, проверку кода и т.д. И для выполнения описанного выше необходимо выполнить одну команду:

    Будет создана вся необходимая инфраструктура в лучшем на данный момент исполнении. Сразу можно приступать к работе. Ничего лишнего.

    Команда может принимать дополнительные аргументы. Например, если планируется использовать CSS препроцессор Stylus:

    Будет автоматически настроена компиляция и сборка стилей с учётом выбранного препроцессора.

    TypeScript

    Сгенерированный код приложения будет использовать TypeScript, который пугает многих, скорее всего попросту из-за ошибочных представлений о нём. На самом деле это тот же JavaScript (ECMAScript 6), но с некоторыми приятными и полезными примочками:

    • интерфейсы,
    • типизация,
    • перечисления (Enum),
    • модификаторы (public, private, static),
    • декораторы (@).

    Всё это позволяет писать более стабильный и красивый код, избавляет от надобности повсеместно использовать скверный JSDoc.

    Начав использовать TypeScript, хочется писать только на нём, и уже не понимаешь, как можно было быть таким грешным – не использовать его раньше?

    Компоненты

    В Angular 2 нет контроллеров, только компоненты. Создать новый можно таким образом:

    Эта команда создаст директорию player в playground с минимально необходимым кодом компонента:

    1. файл реализации,
    2. файл шаблона,
    3. файл стилей с расширением используемого CSS препроцессора,
    4. файл юнит-тестов.

    Никаких копипастов — источника зла и ошибок! Сгенерированный код реализации компонента будет такой:

    @ + Component здесь – и есть пример декоратора. В конечном счёте, это простая функция, которая получает в качестве аргумента конструктор, определённый ниже, и изменяет его с учётом описанной конфигурации, в данном случае это:

    Two-way binding

    Ключевая фишка Angular — two-way binding. Как она реализована в Angular 2?

    Такая запись в шаблоне передаст значение свойства playerPosition текущего компонента и будет изменять его при изменении свойства position внутри компонента player. Это и есть two-way binding.

    Но почему именно такая довольна странная запись?

    В Angular 2 появился новый синтаксис, который позволяет передавать значения свойств дочерним компонентам (one-way binding). Использует он квадратные скобки:

    И можно подписываться на события, возникающие в дочерних компонентах. Используются круглые скобки:

    Такая запись подразумевает, что в компоненте player есть свойство positionChange, которое является экземпляром класса EventEmitter. И когда в компоненте player вызывается this.positionChange.emit(newValue), выполняется код onPositionChange($event), указанный в шаблоне. $event будет содержать значение newValue.

    Собственно, так в Angular 2 и реализуется two-way binding:

    1. передача исходного значения свойства,
    2. подписка на событие с названием «название свойства внутри дочернего компонента» + «Change»,
    3. изменение свойства в родительском компоненте при появлении события.

    А запись [(position)]=«playerPosition» является лишь синтаксическим сахаром, которая делает всё описанное автоматически и экономит время на постройку дома, посадку дерева и выращивание сына.

    Благодаря этой реализации в Angular 2 нет вотчеров, которые ранее являлись источников многих проблем с производительностью. Теперь всё более естественно.

    Принципы SOLID

    В нашей команде мы активно используем принципы SOLID, которые делают поддержку и дальнейшую разработку приложения более эффективным и приятным процессом.

    Angular 2 решает множество проблем, связанных с высоким уровнем связанности кода, новой мощной реализацией Dependency Injection и возможностью абстрагироваться от реализаций различных взаимосвязанных компонентов, используя интерфейсы (TypeScript).

    Например, можно написать такую конструкцию:

    И при создании экземпляра этого компонента автоматически будет создан экземпляр сервиса SomeService и передан в конструктор SomeComponent. Это очень сильно снижает уровень связанности и позволяет тестировать их в отдельности друг от друга.

    Так же, запись public someService (TypeScript) делает этот сервис доступным внутри экземпляра класса с помощью ключевого слова this (this.someService).

    Валидация форм

    Валидация на основе шаблонов, которая была раньше, осталась, но появилась новая дополнительная реализация. Её конфигурация полностью происходит в JavaScript, что позволяет формировать набор правил динамически, создавать реюзабельные валидаторы и полностью управлять процессом, в том числе фильтровать пользовательский ввод.

    Пример реализации формы ввода нового пароля с проверкой его сложности и подтверждением:

    Валидатор (Validators.required и подобные) – простая функция, в которую передаётся значение и которая возвращает null или объект с описанием ошибки.

    В шаблоне формы нужно указать formGroup:

    Полям ввода нужно указать соответствующие названия контролов formGroup:

    И всё. Валидна ли форма, все ошибки и состояния можно получать через объект formGroup, который будет обновляться при каждом взаимодействии пользователя с ней.

    Роутинг

    Роутинг похож на прежний, но с некоторыми приятными улучшениями. Например, если какой-нибудь громоздкий модуль приложения используется редко, можно подгружать его динамически:

    Топ-пост этого месяца:  Как получить id таксономии на странице редактирования в админке

    Обработка всех запросов, начинающихся с /profile (/profile/photo, /profile/orders, /profile/orders/:id), будет передана ProfileModule, который будет загружен раз при первой необходимости.

    Низкий порог вхождения

    В начале статьи говорилось о низком пороге вхождения. Несмотря на всю мощь Angular 2, это действительно так.

    На мой взгляд, это из-за того, что:

    • максимально используются возможности JavaScript,
    • многие вещи реализованы более логичным и ожидаемым образом,
    • качество подсказок и авто-завершения на высшем уровне (благодаря TypeScript),
    • имеется командная строка для генерации всего необходимого,
    • хорошая документация.

    Но это не говорит о лёгкости его усвоения человеком не знающего JavaScript.

    Заключение

    Ещё много можно написать про новую версию фреймворка, сравнить основные сервисы, разобраться, как происходит работа с асинхронными операциями (Zone.js), упомянуть о реактивном программировании (Rx.js) и так далее. Но это уже будет не статья, а целая книга.

    Хочется сказать, что Angular 2 – очень профессиональный и качественный фреймворк. Работая с ним, чувствуешь, что его писали люди, которые имеют большой опыт практической разработки и понимаешь, что больше не хочется писать на первой его версии.

    Какая разница, если я создаю что-то в конструкторе против ngOnInit?

    Я создал форму, вызвав функцию из конструктора

    Я полагаю, я мог бы также создать форму в ngOnInit

    В чем разница между этими двумя подходами? Является ли один лучше другого?

    Конструктор:

    Метод конструктора на классе ES6 (или машинописи в данном случае) является особенностью самого класса, а не угловой функции. Это из-под контролем углового, когда конструктор вызывается, а это значит, что это не подходящий крючок, чтобы вы знали, когда Угловой закончили инициализацию компонента.

    ngOnInit:

    ngOnInit чисто там, чтобы дать нам сигнал, что Угловой закончила инициализацию компонента, Жизненный крюк ngOnInit является гарантией того, что ваши привязки легко доступны.

    Вот большая статья об этом подробно: READ

    Есть намного больше обсуждения на этом, как:

    angular navigationend Разница между Конструктором и ngOnInit

    angular title service (18)

    Angular предоставляет хук жизненного цикла ngOnInit по умолчанию.

    Зачем использовать ngOnInit , если у нас уже есть constructor ?

    Здесь нужно соблюдать две вещи:

    1. Конструктор вызывается всякий раз, когда создается объект этого класса.
    2. ngOnInit вызывается после создания компонента.

    Оба имеют разное удобство использования.

    Конструктор. Метод конструктора в классе ES6 (или в данном случае в TypeScript) — это функция самого класса, а не функция Angular. Он не контролируется Angular, когда вызывается конструктор, что означает, что он не подходит, чтобы сообщать, когда Angular завершил инициализацию компонента. Движок JavaScript вызывает конструктор, а не Angular напрямую. Вот почему был создан хук жизненного цикла ngOnInit (и $ onInit в AngularJS). Учитывая это, есть подходящий сценарий для использования конструктора. Это когда мы хотим использовать внедрение зависимостей — в основном для «связывания» зависимостей в компоненте.

    Поскольку конструктор инициализируется движком JavaScript, а TypeScript позволяет нам сообщать Angular, какие зависимости нам необходимы для сопоставления с определенным свойством.

    ngOnInit предназначен для того, чтобы дать нам сигнал о том, что Angular завершил инициализацию компонента.

    Этот этап включает в себя первый проход в Обнаружении изменений свойств, которые мы можем привязать к самому компоненту, например, используя декоратор @Input ().

    В связи с этим свойства @Input () доступны внутри ngOnInit, но не определены внутри конструктора

    Конструктор — это функция, выполняемая при сборке компонента (или другого класса).

    ngOnInit — это функция, принадлежащая к группам методов жизненного цикла компонента, и они выполняются в другой момент нашего компонента (поэтому и называют жизненным циклом). Вот список всех из них:

    Конструктор будет выполнен перед любой функцией жизненного цикла.

    Я просто добавлю одну важную вещь, которая была пропущена в объяснениях выше и объясняет, когда вы ДОЛЖНЫ использовать ngOnInit .

    Если вы выполняете какие-либо манипуляции с DOM компонента с помощью, например, ViewChildren , ContentChildren или ElementRef , ваши собственные элементы не будут доступны на этапе конструктора.

    Однако, поскольку ngOnInit происходит после того, как компонент был создан и были вызваны проверки ( ngOnChanges ), вы можете получить доступ к DOM на этом этапе.

    В статье Существенное различие между Constructor и ngOnInit в Angular исследует разницу с разных точек зрения. Этот ответ дает наиболее важное объяснение различий, связанных с процессом инициализации компонента, которое также показывает различия в использовании.

    Угловой процесс начальной загрузки состоит из двух основных этапов:

    • построение дерева компонентов
    • обнаружение изменения хода

    Конструктор компонента вызывается, когда Angular создает дерево компонентов. Все хуки жизненного цикла вызываются как часть обнаружения изменений во время работы.

    Когда Angular конструирует дерево компонентов, инжектор корневого модуля уже настроен, поэтому вы можете внедрить любые глобальные зависимости. Кроме того, когда Angular создает экземпляр класса дочернего компонента, инжектор для родительского компонента также уже настроен, поэтому вы можете внедрить поставщиков, определенных в родительском компоненте, включая сам родительский компонент. Компонентные конструкторы — это единственный метод, который вызывается в контексте инжектора, поэтому, если вам нужна какая-либо зависимость, это единственное место, где можно получить эти зависимости.

    Когда Angular начинает обнаружение изменений, создается дерево компонентов и вызывались конструкторы для всех компонентов в дереве. Также узлы шаблона каждого компонента добавляются в DOM. @Input связи @Input обрабатывается во время обнаружения изменений, поэтому нельзя ожидать, что свойства будут доступны в конструкторе. Он будет доступен после ngOnInit .

    Давайте посмотрим на быстрый пример. Предположим, у вас есть следующий шаблон:

    Итак, Angular начинает загрузку приложения. Как я уже сказал, сначала создаются классы для каждого компонента. Так он вызывает конструктор MyAppComponent . Он также создает узел DOM, который является элементом хоста компонента my-app . Затем он переходит к созданию элемента host для child-comp и вызову конструктора ChildComponent . На данном этапе это на самом деле не касается привязки ввода i и каких-либо хуков жизненного цикла. Поэтому, когда этот процесс завершится, Angular получит следующее дерево представлений компонентов:

    Только после этого запускает обнаружение изменений и обновляет привязки для my-app и вызывает ngOnInit для класса MyAppComponent. Затем он переходит к обновлению привязок для child-comp и вызывает ngOnInit в классе ChildComponent.

    Вы можете сделать свою логику инициализации либо в конструкторе, либо в ngOnInit зависимости от того, что вам нужно. Например, статья Вот как получить ViewContainerRef до оценки запроса @ViewChild, показывает, какой тип логики инициализации может потребоваться выполнить в конструкторе.

    Вот несколько статей, которые помогут вам лучше понять тему:

    Короткий и простой ответ будет:

    Constructor : constructor — это default method запускаемый ( по умолчанию ) при создании компонента. При создании an instance класса в это время также будет вызван constructor(default method) . Другими словами, когда компонент создается constructed or/and an instance is created constructor(default method) вызывается соответствующий код, написанный внутри. В основном и в Angular2 он используется для внедрения таких вещей, как services когда компонент создается для дальнейшего использования.

    OnInit : ngOnInit — это хук жизненного цикла компонента, который запускается первым после constructor(default method) когда компонент инициализируется.

    Итак, Ваш конструктор будет вызываться первым, а Oninit будет вызываться позже после метода конструктора.

    boot.ts

    Ресурсы: крючок LifeCycle

    Вы можете проверить это небольшое демо, которое показывает реализацию обеих вещей.

    Приведенные выше ответы на самом деле не отвечают на этот аспект исходного вопроса: что такое хук жизненного цикла? Мне потребовалось некоторое время, чтобы понять, что это значит, пока я не подумал об этом таким образом.

    1) Скажите, что ваш компонент — человек. У людей есть жизни, которые включают в себя много стадий жизни, и тогда мы истекаем.

    2) Наш человеческий компонент может иметь следующий сценарий жизненного цикла: «Родился», «Ребенок», «Начальная школа», «Молодой взрослый», «Взрослый среднего возраста», «Старший взрослый», «Умерший», «Утилизированный».

    3) Скажем, вы хотите иметь функцию для создания детей. Чтобы это не усложнялось и не было достаточно юмористическим, вы хотите, чтобы ваша функция вызывалась только на стадии «Молодого взрослого» в жизни человеческого компонента. Таким образом, вы разрабатываете компонент, который активен только тогда, когда родительский компонент находится на стадии «Молодой взрослый». Крючки помогают вам сделать это, сигнализируя об этом этапе жизни и позволяя вашему компоненту воздействовать на него.

    Прикольные вещи. Если вы позволите своему воображению приступить к написанию чего-то подобного, это будет сложно и забавно.

    Основное различие между конструктором и ngOnInit заключается в том, что ngOnInit является ngOnInit жизненного цикла и выполняется после конструктора. Шаблонный интерполированный компонент и входные начальные значения недоступны в конструкторе, но они доступны в ngOnInit .

    Практическое отличие состоит в том, как ngOnInit влияет на структуру кода. Большая часть кода инициализации может быть перемещена в ngOnInit — если это не создает условий гонки .

    Конструктор антипаттерн

    Значительный объем кода инициализации затрудняет расширение, чтение и тестирование метода конструктора.

    Обычный рецепт отделения логики инициализации от конструктора класса — переместить ее в другой метод, такой как init :

    ngOnInit может служить этой цели в компонентах и ​​директивах:

    Внедрение зависимости

    Основная роль конструкторов классов в Angular — это внедрение зависимостей. Конструкторы также используются для аннотации DI в TypeScript. Почти все зависимости присваиваются в качестве свойств экземпляру класса.

    Средний компонент / конструктор директивы уже достаточно большой, потому что он может иметь многострочную сигнатуру из-за зависимостей, добавляя ненужную логику инициализации в тело конструктора, что вносит вклад в антипаттерн.

    Асинхронная инициализация

    Конструктор асинхронной инициализации часто можно считать антипаттерном и иметь запах, потому что создание экземпляра класса заканчивается раньше, чем асинхронная процедура, и это может создать условия гонки. Если это не так, ngOnInit и другие хуки жизненного цикла являются лучшими местами для этого, особенно потому, что они могут извлечь выгоду из async синтаксиса:

    Если существуют условия гонки (включая то, что компонент не должен появляться при ошибке инициализации), процедура асинхронной инициализации должна выполняться перед созданием экземпляра компонента и перемещаться в родительский компонент, защиту маршрутизатора и т. Д.

    Модульное тестирование

    ngOnInit является более гибким, чем конструктор, и предоставляет некоторые преимущества для модульного тестирования, которые подробно описаны в этом ответе .

    Учитывая, что ngOnInit не вызывается автоматически при компиляции компонентов в модульных тестах, методы, которые вызываются в ngOnInit могут быть ngOnInit или ngOnInit после создания экземпляра компонента.

    В исключительных случаях ngOnInit может быть полностью заглушен, чтобы обеспечить изоляцию для других компонентов (например, некоторой логики шаблона).

    Топ-пост этого месяца:  Торговая марка = Удобство использования интерфейс чизбургера

    наследование

    Дочерние классы могут только расширять конструкторы, но не заменять их.

    Поскольку this не может быть передано до super() , это накладывает ограничения на приоритет инициализации.

    Учитывая, что компонент или директива Angular использует ngOnInit для логики нечувствительной ко времени инициализации, дочерние классы могут выбирать, super.ngOnInit() ли super.ngOnInit() и когда:

    Это было бы невозможно реализовать с помощью одного конструктора.

    Конструктор является методом в JavaScript и рассматривается как особенность класса в es6. Когда создается экземпляр класса, он сразу же запускает конструктор, независимо от того, используется он в среде Angular или нет. Так что он вызывается механизмом JavaScript, а Angular не имеет контроль над этим.

    Класс «ConstructorTest» описан ниже, поэтому он внутренне вызывает конструктор (все это происходит с помощью JavaScript (es6) без Angular).

    Вот почему в Angular отображается обработчик жизненного цикла ngOnInit, когда Angular завершает инициализацию компонента.

    Сначала мы создаем экземпляр класса, как показано ниже, что происходит с непосредственными запусками метода конструктора.

    ngOnInit вызывается Angular при необходимости, как показано ниже:

    Но вы можете спросить, почему мы используем конструктор в Angular?

    Ответ — инъекции зависимостей . Как уже упоминалось ранее, конструктор вызывает движок JavaScript сразу же, когда создается экземпляр класса (перед вызовом ngOnInit в Angular), поэтому машинописный текст помогает нам получить тип зависимостей, определенных в конструкторе, и, наконец, сообщает Angular, какой тип зависимостей мы хотим использовать в этом конкретном компоненте.

    Я нашел ответ и попытался перевести его на английский: этот вопрос все еще возникал, даже в технических интервью. На самом деле, между ними есть большое сходство, но есть и некоторые различия.

    Конструктор является частью ECMAScript. С другой стороны, ngOnInit () — это понятие угловое.

    Мы можем вызывать конструкторы во всех классах, даже если мы не используем Angular

    LifeCycle: конструктор вызывается перед ngOnInt ()

    В конструкторе нельзя назвать элементы HTML. Однако в ngOnInit () мы можем.

    Как правило, вызовы служб в ngOnInit (), а не в конструкторе

    Constructor является методом по умолчанию для класса, который выполняется при создании экземпляра класса и обеспечивает правильную инициализацию полей в классе и его подклассах. Угловой или лучший Dependency Injector (DI) анализирует параметры конструктора, и когда он создает новый экземпляр, вызывая new MyClass() он пытается найти поставщиков, которые соответствуют типам параметров конструктора, разрешает их и передает их конструктору как

    ngOnInit — это хук жизненного цикла, вызываемый Angular2, чтобы указать, что Angular завершил создание компонента.

    Мы должны импортировать OnInit , чтобы использовать его следующим образом (на самом деле реализация OnInit не обязательна, но считается хорошей практикой):

    затем, чтобы использовать метод OnInit мы должны реализовать его в классе следующим образом.

    Реализуйте этот интерфейс для выполнения пользовательской логики инициализации после инициализации связанных с данными свойств вашей директивы. ngOnInit вызывается сразу после того, как привязанные к данным свойства директивы были проверены впервые, и до того, как был проверен любой из его дочерних элементов. Он вызывается только один раз, когда создается директива.

    В основном мы используем ngOnInit для всей инициализации / объявления и избегаем вещей, которые будут работать в конструкторе. Конструктор должен использоваться только для инициализации членов класса, но не должен выполнять «работу».

    Таким образом, вы должны использовать constructor() для установки Dependency Injection, а не многое другое. ngOnInit () — лучшее место для «запуска» — это где / когда разрешаются привязки компонентов.

    Для получения дополнительной информации обратитесь сюда:

    Угловой 2-х компонентный конструктор против OnInit

    В угловых жизненных циклах

    1) Угловой инжектор определяет параметр конструктора (ов) и создает экземпляр класса.

    2) Следующий угловой цикл жизненного цикла

    ngOnChanges -> вызвать привязку параметров директивы.

    ngOnInit -> Начать угловой рендеринг .

    Вызвать другой метод с состоянием углового жизненного цикла.

    Хорошо, прежде всего ngOnInit является частью жизненного цикла Angular , а constructor — частью класса JavaScript ES6 , поэтому основное отличие начинается прямо здесь! .

    Посмотрите на диаграмму ниже, которую я создал, которая показывает жизненный цикл Angular.

    В Angular2 + мы используем constructor для выполнения DI(Dependency Injection) за нас, в то время как в Angular 1 это происходило посредством вызова метода String и проверки, какая зависимость была введена.

    Как вы видите на диаграмме выше, ngOnInit происходит после того, как конструктор готов, а ngOnChnages и ngOnChnages после того, как компонент готов для нас. Вся инициализация может произойти на этом этапе, простой пример — внедрение службы и инициализация ее при инициализации.

    Хорошо, я также предоставил вам пример кода, чтобы вы могли посмотреть, как мы используем ngOnInit и constructor в приведенном ниже коде:

    Оба метода имеют разные цели / обязанности. Задача конструктора (который поддерживается языком) состоит в том, чтобы убедиться, что инвариант представления выполняется. В противном случае указывается, чтобы убедиться, что экземпляр действителен, давая правильные значения членам. Разработчик должен решить, что означает «правильный».

    Задача метода onInit () (который является угловым понятием) состоит в том, чтобы разрешить вызовы метода для правильного объекта (инвариант представления). Каждый метод должен, в свою очередь, убедиться, что инвариант представления выполняется, когда метод завершается.

    Конструктор должен использоваться для создания «правильных» объектов, метод onInit дает вам возможность вызывать вызовы метода в четко определенном экземпляре.

    Первый (конструктор) связан с созданием класса и не имеет ничего общего с Angular2. Я имею в виду, что конструктор можно использовать в любом классе. Вы можете поместить в него некоторую обработку инициализации для вновь созданного экземпляра.

    Второй соответствует хуку жизненного цикла компонентов Angular2:

    Цитируется с официального сайта angular:

    • ngOnChanges вызывается при изменении значения привязки ввода или вывода
    • ngOnInit вызывается после первого ngOnChanges

    Поэтому вы должны использовать ngOnInit если обработка инициализации опирается на привязки компонента (например, параметры компонента, определенные с помощью @Input ), в противном случае конструктора будет достаточно .

    constructor вызывается, когда Angular «создает / конструирует» компонент. Метод ngOnInit — это ловушка, представляющая часть инициализации жизненного цикла компонента. Хорошей практикой является использование его только для сервисного внедрения :

    Даже если это возможно, вы не должны делать какую-то «работу» внутри. Если вы хотите запустить какое-то действие, которое должно произойти при «инициализации» компонента, используйте ngOnInit :

    Более того, действия, которые включают входные свойства , исходящие от родительского компонента, не могут быть выполнены в конструкторе. Они должны быть помещены в метод ngOnInit или другой хук. То же самое относится к элементу, связанному с представлением (DOM), например, к элементам viewchild :

    constructor() используется для внедрения зависимостей.

    ngOnInit() , ngOnChanges() И ngOnDestroy() т.д., жизненный цикл методами. ngOnChanges() будет вызываться первым, до того ngOnInit() , как значение связанного свойства изменится, оно НЕ будет вызвано, если не было изменений. ngOnDestroy() вызывается при удалении компонента. Чтобы использовать это, OnDestroy должен быть implement отредактирован классом.

    Конструктор — первый, и это иногда случается, когда данные @input равны нулю! поэтому мы используем Constructor для объявления сервисов, и ngOnInit происходит после. Пример для Contrutor:

    Пример для onInit:

    Я думаю, что onInit похож на InitialComponents () в winForm.

    Разница между Конструктором и ngOnInit

    Угловая ngOnInit обеспечивает цикл жизненного цикла ngOnInit по умолчанию.

    Зачем использовать ngOnInit , если у нас уже есть constructor ?

    21 ответ

    Constructor — это метод по умолчанию класса, который выполняется при создании экземпляра класса и обеспечивает правильную инициализацию полей в классе и его подклассах. Угловой или более эффективный инжектор зависимостей (DI) анализирует параметры конструктора, и когда он создает новый экземпляр, вызывая new MyClass() он пытается найти поставщиков, которые соответствуют типам параметров конструктора, решает их и передает их конструктору, например

    ngOnInit — это крючок жизненного цикла, называемый Angular2, чтобы указать, что Angular сделан, создавая компонент.

    Нам нужно импортировать OnInit для того, чтобы использовать это (фактически реализация OnInit не является обязательной, но считается хорошей практикой):

    то для использования метода OnInit мы должны реализовать в этом классе.

    Внедрите этот интерфейс для выполнения пользовательской логики инициализации после инициализации свойств, связанных с данными директивы. ngOnInit вызывается сразу после того, как свойства, привязанные к данным, были проверены в первый раз и до того, как был проверен любой из его дочерних элементов. Он вызывается только один раз, когда директива создается.

    В основном мы используем ngOnInit для всех инициализаций/деклараций и избегаем работы в конструкторе. Конструктор должен использоваться только для инициализации членов класса, но не должен выполнять фактическую «работу».

    Поэтому вы должны использовать constructor() для настройки Injection Dependency и не более того. ngOnInit() — лучшее место для «запуска» — там, где/когда привязки компонентов разрешены.

    Для получения дополнительной информации см. Здесь:

    Статья Существенное различие между конструктором и ngOnInit в Angular раскрывает разницу с несколькими перспективами. Этот ответ дает наиболее важное объяснение разницы, связанное с процессом инициализации компонента, которое также показывает разные значения использования.

    Angular Процесс начальной загрузки состоит из двух основных этапов:

    • построение дерева компонентов
    • обнаружение изменений при запуске

    Конструктор компонента вызывается, когда Angular строит дерево компонентов. Все крючки жизненного цикла называются как часть запуска обнаружения изменений.

    Когда Angular создает дерево компонентов, инжектор корневого модуля уже настроен, поэтому вы можете вводить любые глобальные зависимости. Кроме того, когда Angular создает экземпляр класса дочерних компонентов, инжектор для родительского компонента также уже настроен, поэтому вы можете вводить провайдеры, определенные на родительском компоненте, включая сам родительский компонент. Конструкторы компонентов — это единственный метод, который вызывается в контексте инжектора, поэтому, если вам нужна какая-либо зависимость, единственное место для получения этих зависимостей.

    Когда Angular начинает обнаружение изменений, создается дерево компонентов и вызываются конструкторы для всех компонентов в дереве. Также каждый узел шаблона компонента добавляется в DOM. Механизм связи @Input обрабатывается во время обнаружения изменений, поэтому вы не можете ожидать наличия свойств в конструкторе. Он будет доступен после ngOnInit .

    Посмотрим на быстрый пример. Предположим, у вас есть следующий шаблон:

    Итак, Angular запускает загрузку приложения. Как я уже сказал, он сначала создает классы для каждого компонента. Поэтому он вызывает конструктор MyAppComponent . Он также создает DOM node, который является элементом хоста компонента my-app . Затем он переходит к созданию элемента хоста для конструктора child-comp и вызова ChildComponent . На этом этапе это не связано с привязкой ввода i и любыми крючками жизненного цикла. Поэтому, когда этот процесс завершен, Angular заканчивается следующим деревом представлений компонентов:

    Топ-пост этого месяца:  Каким должен быть сайт, чтобы он стал популярным

    Только затем выполняется поиск изменений и обновление привязок для my-app и вызывает ngOnInit в классе MyAppComponent. Затем он переходит к обновлению привязок для child-comp и вызывает ngOnInit в классе ChildComponent.

    Вы можете выполнить свою логику инициализации либо в конструкторе, либо в ngOnInit в зависимости от того, что вам нужно. Например, статья Вот как получить ViewContainerRef перед оценкой запроса @ViewChild показывает, какой тип логики инициализации может потребоваться выполнить в конструкторе.

    Вот несколько статей, которые помогут вам лучше понять тему:

    Angular компоненты: чем отличается конструктор от ngOnInit

    ngOnInit — это хук жизненного цикла, вызываемый Angular2 для указания того, что Angular завершил создание компонента.

    Мы должны импортировать OnInit, чтобы использовать его следующим образом (фактически реализация OnInit не обязательна, но считается хорошей практикой):

    затем, чтобы использовать метод OnInit, мы должны реализовать его в классе следующим образом.

    Implement this interface to execute custom initialization logic after your directive’s data-bound properties have been initialized.
    ngOnInit is called right after the directive’s data-bound properties have been checked for the first time,
    and before any of its children have been checked.
    It is invoked only once when the directive is instantiated.

    В основном мы используем ngOnInit для всей инициализации / замедления и избегаем вещей для работы в конструкторе. Конструктор должен использоваться только для инициализации членов класса, но не должен выполнять «работу».

    Таким образом, вы должны использовать constructor () для установки Dependency Injection, а не многое другое. ngOnInit () — лучшее место для «запуска» — это где / когда разрешаются привязки компонентов

    за дополнительной информацией обращайтесь сюда

    Constructor Vs ngOnInit : Angular Components

    This article is one in a series of articles inspired by my latest hobby which is explaining Angular (Angular 2+) concepts in short articles, avoiding all the mumbo jumbo.

    In this article, I will be discussing a few cons >constructor function and the ngOnInit function.

    The constructor Function

    The constructor function comes with every class, constructors are not specific to Angular but are concepts derived from Object oriented designs. The constructor creates an instance of the component class.

    The ngOnInit Function

    The ngOnInit function is one of an Angular component’s life-cycle methods. Life cycle methods (or hooks) in Angular components allow you to run a piece of code at different stages of the life of a component.

    Unlike the constructor method, ngOnInit method comes from an Angular interface ( OnInit ) that the component needs to implement in order to use this method. The ngOnInit method is called shortly after the component is created.

    What to cons >For most people coming with a good background in Object Oriented programming, it makes sense to insert dependencies into the constructor and also put all the component initialization code ins >constructor body. While the former works fine, the latter results in an Angular gotcha when you realize that all your initialization code placed in the constructor body is not executed.

    This is because the constructor is called to initialize the >constructor is called before ngOnInit , at this point the component hasn’t been created yet, only the component class has being instantiated thus your dependencies are brought in, but your initialization code will not run.

    To ensure your initialization code runs, simply put it in the ngOnInit function which guarantees you that the component has already being created.

    So to wrap things up, while coding your components, inject your dependencies into the component >constructor method but put all your initialization code in your ngOnInit life cycle method.

    There you have it, another simple Angular mystery cleared up.

    Разница между застройщиком и ngOnInit

    Угловой обеспечивает жизненный цикл крюк ngOnInit по умолчанию.

    Почему следует ngOnInit использовать, если у нас уже есть constructor ?

    Constructor Является метод по умолчанию класса , который выполняется , когда создается экземпляр класса и обеспечивает правильную инициализацию полей класса и его подклассов. Угловой или лучше Dependency Injector (DI) анализирует параметры конструктора и когда он создает новый экземпляр, вызвав new MyClass() он пытается найти поставщик , которые соответствуют типам параметров конструктора, решает их и передает их в конструктор , как

    ngOnInit это жизненный цикл крючок называют Angular2, чтобы указать, что Угловой делаются создание компонента.

    Мы должны импортировать OnInit , чтобы использовать , как это ( на самом деле реализации OnInit не является обязательным , но считается хорошей практикой):

    затем использовать метод , OnInit мы должны реализовать в классе , как это.

    Реализуйте этот интерфейс, чтобы выполнить пользовательскую логику инициализации после свойств данных с привязкой к вашей директиве в инициализированы. ngOnInit вызывается сразу после того, как свойства данных переплете дИРЕКТИВЫ были проверены в первый раз, и, прежде чем любой из его детей были проверены. Он вызывается только один раз, когда директива конкретизируется.

    В основном мы используем ngOnInit для всех инициализации / декларации и избегать вещей , чтобы работать в конструкторе. Конструктор должен использоваться только для инициализации членов класса , но не должен делать реально «работать».

    Таким образом , вы должны использовать constructor() для установки Dependency Injection и не многого другого. ngOnInit () лучше место , чтобы «начать» — это где / когда привязки компоненты будут решены.

    Для получения дополнительной информации см здесь:

    Я думаю, что лучший пример будет использовать услуги. Допустим, что я хочу, чтобы захватить данные с моего сервера, когда мой компонент получает «Активированный». Допустим, что я хочу сделать некоторые дополнительные вещи, чтобы данные после того, как я получить его с сервера, может быть, я получаю сообщение об ошибке и хочу зарегистрировать ее по-разному.

    Это очень легко с ngOnInit над конструктором, он также ограничивает, сколько обратных слоев нужно добавить к моему заявлению.

    с моим конструктором я мог бы просто назвать свою _userService и заполнить мою user_list, но, возможно, я хочу сделать некоторые дополнительные вещи с ним. Как убедиться, что все upper_case, я не совсем уверен, как мои данные поступают через.

    Так что это делает его гораздо проще использовать ngOnInit.

    Это делает его гораздо легче увидеть, и поэтому я просто называю свою функцию в моем компоненте, когда я инициализации, вместо того, чтобы вырыть для него где-то в другом месте. На самом деле это просто еще один инструмент, который можно использовать, чтобы сделать его более удобным для чтения и использования в будущем. Кроме того, я считаю, это действительно плохая практика, чтобы поместить вызовы функций внутри конструктора!

    В статье существенная разница между застройщиком и ngOnInit в Угловом исследует разницу с разных точек зрения. Ответ на этот вопрос дает наиболее важное различие объяснению , связанное с процессом инициализации компоненты , который также показывает различный в использовании.

    Угловой процесс начальной загрузки состоит из двух основных этапов:

    • построение компонентов дерева
    • работает обнаружение изменений

    Конструктор компонента вызывается, когда угловые конструкции компонентов дерева. Все крючки жизненного цикла называются части запуска обнаружения изменений.

    Когда угловые конструкции компонентов дерева модуля корневого инжектор уже настроен таким образом Вы можете вводить любую глобальную зависимость. Кроме того, когда Угловой конкретизирует класс ребенка компонент форсунка для родительского компонента также уже настроена таким образом, вы можете вводить поставщик, определенные в родительском компоненте, включая сам родительский компонент. Конструкторы компонентов являются единственным методом, который вызывается в контексте инжектора, так что если вам нужна любая зависимость, что это единственное место, чтобы получить эту зависимость.

    Когда Угловые начинает меняться обнаружение дерево компонентов строятся и конструкторы для всех компонентов в дереве были названы. Также узлы шаблона каждого компонента добавляются в DOM. @Input Механизм связи обрабатываются при обнаружении изменений , так что вы не можете ожидать , чтобы иметь свойство , доступное в конструкторе. Он будет доступен на после ngOnInit .

    Давайте посмотрим, быстрый пример. Предположим, у вас есть следующий шаблон:

    Так Угловая начинается развернув приложение. Как я сказал , что это первое создает классы для каждого компонента. Так он вызывает MyAppComponent конструктор. Он также создает узел DOM , который является хост — элемент my-app компонента. Затем он приступает к созданию узла элемента для child-comp и вызова ChildComponent конструктора. На данном этапе это не очень обеспокоен с i связывающим входом и любым жизненным циклом крючками. Поэтому , когда этот процесс будет завершен Угловой заканчиваются следующим деревом компонентов просмотров:

    Только после этого запускается обнаружения и обновляет изменения привязок для my-app и вызовы ngOnInit на MyAppComponent класса. Затем он приступает к обновлению привязок для child-comp и требует ngOnInit от класса ChildComponent.

    Вы можете сделать вашу логику инициализации в любом конструкторе или в ngOnInit зависимости от того, что вам нужно доступно. Например, статья Вот как получить ViewContainerRef до того @ViewChild запрос оценивается показывает , какой тип логики инициализации может потребоваться быть выполнено в конструкторе.

    Вот некоторые статьи, которые помогут вам понять тему лучше:

    angular 2 приложения компонент конструктора и ngoninit не называется

    Привет я новичок в угловых 2 мировой

    я использую угловой «2.0.0-бета.0»

    у меня ботинок.файл TS

    и я AppComponent

    Шаблон AppComponent в формате HTML

    когда я открываю консоль там нет сообщений от конструктора или почек ngOnInit root по умолчанию, как вы можете видеть выше в файл AppComponent и нет ошибок в консоли

    почему нет сообщения консоли.журнал(«appComponent загружен»)

    я проверил ответ, и не работает для меня

    Директива @в @компонентов в угловой

    angular — используют трубы служб и компонентов

    angular 2 ngoninit не называется

    angular html-код привязки

    angular нг-повторять ошибки “дубликаты в репитер не допускаются”.

    в angularjs : предотвратить ошибки $дайджест уже в момент вызова $объем.$применить()

    разница между конструктором и ngoninit

    how to bundle an angular app for production

    огромное количество файлов, генерируемых для каждой angular проект

    ngoninit не называют, когда инъекционный class инстанцируют

    в чем разница между угловыми маршрута и angular пользовательского интерфейса маршрутизатора?

    © 2020 — Вопросы и ответы по программированию

    Добавить комментарий