Angular update обновление до TypeScript, возможность односторонней привязки и динамические шаблоны


Угловое 6 с ngComponentOutlet и привязка/обновление данных

Я много читал о том, что ngComponentOutlet не работает со связыванием, но, насколько я понял, все случаи хотели что-то вроде дочернего parent binding/communication (@Input и @Output), и для этого существует ng-динамический компонент, который работает). Я думаю, что мой случай немного проще, я просто хочу, чтобы привязка обновлялась между динамически создаваемыми компонентами и собственными шаблонами.

Кстати, я читал эти страницы:

Идея ngfor и ngComponentOutlet на основе первой ссылки, проблема, описанная в 2. и 3. link

Основная идея: создать список, который содержит разные типы, и визуализировать их по-разному на основе собственных шаблонов. Эти шаблоны содержат привязки к их собственным компонентам.

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

Обзор небольшого примера кода: у меня есть пустой массив и кнопка, и когда я нажимаю эту кнопку, в список создаются и вставляются 2 компонента. Эти компоненты внутри списка получаются с использованием собственного шаблона (например: comp-a.component.html). Все это работает:

Toplvel html код:

Код компонента Toplevel:

Пример компонента «A» (B практически тот же):

Компоненты собственного html-шаблона (не могут быть проще):

Как вы можете видеть, член «title» имеет начальное значение, но в методе click() я вызываю «init» методы на компонентах и пытаюсь установить новое значение. Проблема в том, что привязка данных работает, но она не обновляется, поэтому список отображается со строкой «Начальное значение для A», а newValue просто устанавливается в код позади, но страница не обновляется. Между тем обновление «staticBindingMemberValue» работает:

Я читал много способов динамически создавать компоненты, я мог бы неправильно понять что-то, поэтому мой вопрос:

До сих пор нет способа с Angular 6 сделать эту чрезвычайно простую работу по созданию динамических компонентов?

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

Я должен использовать другой способ динамического создания компонентов?

Я должен создать привязку данных по-разному?

Хорошо, я нашел способ сделать это с помощью фабричного резольвера, но это не совсем то же самое, и немного хакерское.. любая идея об этом подходе?

Почему не срабатывает обновление данных в AngularJS?

Только начал изучать AngularJS и столкнулся с проблемой. Не обновляются данные из контроллера. Приведу код контроллера:
testController.js

  • Вопрос задан более трёх лет назад
  • 1215 просмотров

Ангулар ничего не знает о клике, повешенном через метод .on() — поэтому после клика Ангулару нужно принудительно сообщить об рефреше скоупа:

По поводу вообще всего в общем:

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

Прятать/показывать элементы нужно не по-жикверевски, через метод .css() (работая с DOM), а по-ангуларовски, через ng-show (работя с логикой).

Задавать классы нужно не по-жикверевски, через метод .addClass() (работая с DOM), а по-ангуларовски, через ng-class (работя с логикой) (причем, ты задаешь классы .show/.hide — тут не классы нужны, тут используй ng-show, ведь ты же показываешь/прячешь).

Вставлять элементы в DOM не нужно, это делается прямо в ХТМЛе, а не в контроллере:

Вешать события на элементы нужно не по-жикверевски, а прямо в ХТМЛе:

Да и вообще, там должна быть обычная ссылка, а не событие клика:


И самое главное — удалите жиКвери. Он не нужен вообще-привообще, выкиньте из мозга саму концепцию жиКвери, выкиньте способ размышления на жиКвери — Ангулар работает совершенно по-другому.

Топ-пост этого месяца:  Новый формат «Реклама сайтов» ВКонтакте как настроить

Привязка ngModel к динамическому списку флажков: Angular 2 / Typescript

Я не уверен, что правильный способ привязки и обновления модели, где флажки динамически генерируются. (Это ASP.NET основной проект с Angular 2 изначально создавался с помощью генератора Yeoman) или простой флажок, если на то пошло, я только что узнал.

ниже урезан код, который имеет объект и временные интервалы. Каждый объект может иметь несколько временных интервалов. Список флажков timeslot отображается нормально. Исходные данные указывают, что только один timeslot должен быть проверен. Но когда я загружаю объект, все временные интервалы проверяются. Они не связаны с ngModel, как я ожидал.

  1. как это исправить, чтобы проверялись только временные интервалы, включенные в данные объекта, а не все?
  2. как привязать то, что проверено к свойству ngModel timeslotids? Нужно ли создавать свойство массива для компонента и манипулировать им вместо того, чтобы полагаться на ngModel? (пробовал это, но, очевидно, не сделал это правильно, поэтому вернулся назад к коду ниже)
  3. у меня также, похоже, есть проблема, связанная с простым флажком (haselectric), потому что это тоже не отключается, когда это должно быть. Мне не хватает импорта, который бы все это исправил??

ОБЪЯСНЕНИЕ КОДА У меня есть два объекта (facility и timeslot), поступающие из api, который я привязываю к интерфейсам. Они были значительно уменьшены в свойствах ради простоты:

Это данные JSON для Временные интервалы:

Это данные JSON для одного объекта до обновления:

компонент для редактирования объекта (facility.деталь.HTML-код):

код для компонента (объекта.деталь.ts)

P.S. причина, по которой у меня есть два свойства в объекте facility для временных интервалов, заключается в том, что список идентификаторов намного проще передать в API для обновления. А не пройдя полную модели (интервалы больше, чем у меня здесь и не нужен для обновления базы данных). Пожалуйста, зарезервируйте комментарии по этому поводу, поскольку это не связано с тем, что необходимо выполнить.

я нашел этот вопрос. но, к сожалению, никто не ответил этому бедняге:—32привязка ngmodel с динамическим массивом флажка в angular2 Пробовал это, но не получилось:получить значения из динамического списка флажок Я также попробовал версию обновления локального свойства (изменения) флажок, но это, похоже, тоже не сработало:Angular 2: получить значения нескольких флажков

2 ответов

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

кроме того, я считаю, что это должно быть event.target , но это event.source из-за материала. Вид неуклюжего решения, но я думаю, что это поможет вам понять, как вы можете достичь того, что хотите

основываясь на Answer ответе выше, я смог выяснить решение моего вопроса. Спасибо НЛО.

Как обновить компонент в Angular

Я работаю над проектом Angular. Я борюсь с обновлением действия в компоненте.

Я хотел бы обновить компоненты маршрутизатора по нажатию кнопки. У меня есть кнопка обновления, когда я нажимаю на нее, компонент / маршрутизатор должен быть обновлен. Я пытался window.location.reload() и location.reload() , эти два не подходят для моих нужд. Пожалуйста, помогите, если кто-нибудь знает об этом.

8 ответов

После некоторого исследования и изменения моего кода, как показано ниже, скрипт работал для меня. Я просто добавил условие:

Добавление этого кода в конструктор необходимого компонента сработало для меня.

Обязательно unsubscribe из этой моей подписки в ngOnDestroy() .

Используйте this.ngOnInit (); , чтобы перезагрузить тот же компонент, вместо того, чтобы перезагрузить всю страницу !!

К счастью, если вы используете Angular 5.1+, вам больше не нужно реализовывать хак, так как была добавлена ​​нативная поддержка. Вам просто нужно установить onSameUrlNavigation для «перезагрузки» в параметрах RouterModule:

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

Топ-пост этого месяца:  Как объединить два сайта WordPress импорт содержания сайта

Другой способ обновить (сложным способом) страницу в угловом 2, например, это выглядит как f5

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

Создание базового макета Angular на основе статичной html страницы

Опубликовано shwan в 19.12.2020 19.12.2020


Зачастую при создании SPA-приложения с помощью фреймворка Angular имеется шаблон сайта, представленный в виде статической html страницы. Задача разработчика состоит в том, чтобы разбить этот макет на отдельные компоненты, сохранив внешний вид сайта неизменным. Именно этим мы сейчас и займемся.

Начнем перенос шаблона сайта Bootstrap 4 на Angular. Используемый шаблон сайта можно найти в статье Базовый шаблон сайта Bootstrap 4.

Для начала подключим библиотеки bootstrap к проекту. Для этого скачиваем последнюю актуальную на данный момент версию 4.0.0-beta.2-dist с официального сайта Bootstrap.

Добавляем файлы bootstrap.min.css и bootstrap.bundle.min.js в папку библиотек Angular2\wwwroot\dist\

Теперь для удобства дальнейшей настройки сайта необходимо зайти в свойства проекта.

Выберем вкладку Ресурсы (Resources) и нажмем на ссылку создания нового файла ресурсов.

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

Теперь изменим файл макета:

Приведем содержимое файла к следующему виду:

Теперь преступим к созданию компонентов Angular. Для начала выделим три самых крупных компонента:

Подробнее о создании компонентов можно прочитать в статье Создание нового компонента Angular.

Итак, мы получаем три больших компонента. Создадим компоненты header и footer. Содержимое Content разместим на странице home.

Таким образом мы получаем следующую структуру приложения

Угловая 2 односторонняя привязка данных не обновляется внутри динамически загруженного компонента

Я использовал компонент, который просто переключает вкладки, все работает нормально.

После того, как я переехал компонент внутри динамического компонента Loaded компонента, когда я установил с функцией setTab() < this.tabInfo = true >от false , я остался с false в шаблоне при печати с << tabInfo >> .

Почему данные не обновляются? Я попробовал обновить зону, это не сработает.

Функция выполняется, и все значения установлены правильно, я проверил консоль. Но это изменение не видно в шаблоне. То, что я установил в конструкторе, исправлено, я не могу его изменить.

Создан 06 апр. 16 2020-04-06 08:42:59 Teddy

UA Blog

Blog on instersting topics

Angular 7: Как обновится и описание нововведений

Angular 7 был недавно выпущен и не смотря на отсутствия значительных нововведений, есть несколько интересных изменений в утилитах и функциях которые увеличат производительность. И как всех предыдущих релизах новых версий, обновление будет очень легким.

Нововведения

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

CLI Prompts

Команда Angular постоянно сосредоточена на совершенствовании средств доступных разработчикам и новые консольные команды тому доказательство. Обычно когда вы запускаете такие команды как ng new или ng add, то они запускаются единожды. И если например вы хотите добавить роутинг, то вам нужно перезапустить команду.
Теперь с новая CLI утилита запрашивает возможные настройки. Например, при выполнении команды ng new mySuperApp у вас будет спрошено не хотите ли вы добавить роутинг. Если вы хотите попробовать разные форматы CSS, не переживайте, CLI позволит вам выбрать между CSS, SCSS, SASS, LESS. Более того можно сделать еще более тонкую настройку. Добавьте файл schematic.json используя Schematic CLI и вы можете задать Ангуляру какие параметры запрашивать при выполнении команды.

Angular Material CDK
ScrollingModule

Так как много мобильных фреймворков начали двигаться в сторону динамической загрузки таких данных как изображения или большие списки, Angular последовал их примеру, добавив ScrollingModule, который позволяет реализовать виртуальную прокрутку, то есть когда элементы становятся видимыми или невидимыми, они добавляются или удаляются из DOM. Производительность резко возросла с точки зрения пользователя. В следующий раз когда вы будете иметь потенциально большой список для прокрутки, прикрепите его компоненту cdk-virtual-scroll-viewport и получите преимущество в увеличении производительности.

Топ-пост этого месяца:  Как настроить Яндекс.Директ на поиске Шаги 2 и 3

DragDropModule

Теперь вы можете использовать модуль Angular Material для реализации drag&drop функциональности. Поддерживаются такие функции как пересортировка списков, перемещения элементов между списков. CDK включает автоматический рендеринг, drag обработчики, drop обработчики и даже возможность перемещения данных.


Производительность приложения

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

Команда Angular пытается сделать меньше не только сам фреймворк, а также приложений написанные на нем. Они исправили часто повторяемую ошибку включения полифилов reflect-metadata в продакшн сборку. Версия Angular 7 автоматически удаляет их.
Новые проекты также используют по умолчанию Budget Bundles которые сообщат вам, когда ваше приложения достигнет лимит максимального размера. По умолчанию, вы получите предупреждение на 2MB, и ошибку на 5MB. Если вам нужно изменить эти размеры, отредактируйте ваш angular.json файл.

Обновленные зависимости

Angular теперь использует Typescript 3.1, RxJS и Node.js 10.

Обновления до Angular 7

Для большинства Angular приложений которые используют Angular 6 and RxJS 6, нужно выполнить следующую команду:

Также если вы используете Angular Material, выполните следующую команду

Создание базового макета Angular на основе статичной html страницы

Опубликовано shwan в 19.12.2020 19.12.2020

Зачастую при создании SPA-приложения с помощью фреймворка Angular имеется шаблон сайта, представленный в виде статической html страницы. Задача разработчика состоит в том, чтобы разбить этот макет на отдельные компоненты, сохранив внешний вид сайта неизменным. Именно этим мы сейчас и займемся.

Начнем перенос шаблона сайта Bootstrap 4 на Angular. Используемый шаблон сайта можно найти в статье Базовый шаблон сайта Bootstrap 4.

Для начала подключим библиотеки bootstrap к проекту. Для этого скачиваем последнюю актуальную на данный момент версию 4.0.0-beta.2-dist с официального сайта Bootstrap.

Добавляем файлы bootstrap.min.css и bootstrap.bundle.min.js в папку библиотек Angular2\wwwroot\dist\

Теперь для удобства дальнейшей настройки сайта необходимо зайти в свойства проекта.

Выберем вкладку Ресурсы (Resources) и нажмем на ссылку создания нового файла ресурсов.

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

Теперь изменим файл макета:

Приведем содержимое файла к следующему виду:

Теперь преступим к созданию компонентов Angular. Для начала выделим три самых крупных компонента:

Подробнее о создании компонентов можно прочитать в статье Создание нового компонента Angular.

Итак, мы получаем три больших компонента. Создадим компоненты header и footer. Содержимое Content разместим на странице home.

Таким образом мы получаем следующую структуру приложения

Угловой 2 односторонняя привязка данных не обновляется в динамически нагруженных компонентов

Я использовал компонент, который просто переключает вкладки, все работало нормально.

После того, как я переехал компонент внутри динамического компонента Loaded компонента, когда я поставил с функцией setTab() < this.tabInfo = true >от false , я остался с false в шаблоне , когда при печати ` tabInfo ` .

Почему данные не обновляются? Я попробовал освежающую зону, она не работает.

Эта функция выполняется, и все значения установлены правильно, я проверил консоль. Но изменение не отображается в шаблоне. То, что я установить в конструкторе фиксирована, я не могу изменить его.

Если вы используете loadAsRoot() вы должны явно вызвать обнаружение изменений , как

привязки шаблона Angular4 не работают без функций в компоненте, после обновления НОГО

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

Ака. когда условие и ngClass верно, выводит неопределенными. Я могу попробовать replaceing одиночные кавычки ( ‘) с ( ), но это ничего не меняет.

ngClass работал, теперь я должен поставить функцию в dropdown.ts, как так

Если isDropDownOpen переменная истинна, класс добавляется к элементу «не определен». Изображение следующим образом.

Любые подсказки, как я могу исправить это без вручную собираюсь весь код в этом довольно большом проекте?

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