Angular компоненты вложение дочернего контейнера в родительский в версии 2


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

Использование ViewChild в Angular для доступа к дочернему компоненту, директиве или элементу DOM

Хотите получить доступ к дочернему компоненту, директиве или элементу DOM из родительской компоненты? Это легко сделать с декоратором ViewChild. ViewChild возвращает первый элемент, который соответствует заданному элементу, директиве или шаблону. В случаях, когда вы хотите получить доступ к нескольким дочерним элементам, вместо этого вы должны использовать ViewChildren.

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

Директивы

Допустим, у нас есть BaconDirective:

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

Теперь мы можем получить доступ к директиве с ViewChild с помощью следующего фрагмента в нашем классе компоненты.

В этом примере мы будем обращаться к переменной экземпляра компонента нашей директивы и задавать переменную экземпляра extraIngredient с ее значением:

Здесь мы использовали setter, чтобы установить нашу переменную extraIngredient. Обратите внимание, мы ожидаем, что привязка к жизненному циклу AfterViewInit получит доступ к нашей переменной, так как это делает доступным дочерние компоненты и директивы.

Элементы DOM

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

Мы можем получить доступ к вводу с помощью ViewChild следующим образом:

И значение нашего инпута будет установлена на «Anchovies! ����» при запуске ngAfterViewInit.

Дочерние компоненты

Так же легко получить доступ к дочернему компоненту и вызвать методы или получить доступ к переменным экземпляра потомка. Допустим, у нас есть дочерний компонент с методом whoAmI:

Затем мы можем вызвать этот метод из нашего родительского компонента с помощью ViewChild следующим образом:

angular2 ngrouter с общей родительского компонента

У меня есть следующие компоненты в мои :

  • AppComponent
  • ProjectComponent
    • ProjectListComponent
    • ProjectNewComponent

    allhtml code

    У меня есть простой макет, который должен быть одинаковым на страницах, поэтому я ставлю следующие за основным компонентом:

    Насколько я понимаю, маршрутизатор впрыскивает его содержимое . Теперь я хочу создать вложенный компонент проекта. Для простоты компонент проекта должен состоять из трех частей. Один родительский компонент, который содержит только заголовок и контейнер, и два дочерних компонентов, которые вложены в родительский компонент.

    Мой выглядит следующим образом:

    Мой вопрос: как должны компонента и компонента выглядеть?

    Моя цель-что-то нравится, когда я называю или :

    Как я могу добиться этого? Преимуществом этого будет то, что мне не придется переписывать любой html-код.

    angular: родительский и дочерний компонент коммуникации, @host и forwardref

    angular2 проект rc5 маршрутом по умолчанию appcomponent

    angular2: обеспечить текущий маршрут для родительского компонента

    angulardart [routerlink] не добавляет родительский путь

    обмен данными между родительским и гранд-дочерние компоненты (через роутер выход) в angular2?

    названный маршрутизатор розетки — родительский навигации

    роутер не создает шаблон родительского компонента?

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

    Обновить свойство родительского компонента из дочернего компонента в Angular 2

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

    Топ-пост этого месяца:  Новые атрибуты гиперссылок HTML5 download, media и ping

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

    app.ТС

    заголовок.ТС

    заголовок/поиск.ТС

    пожалуйста, проверьте выше приведенный plunker. Функция поиска работает только один раз. После закрытия поиска он не запускается снова.

    Is @input — это правильный вариант использования для этого сценария? Пожалуйста, помогите мне исправить это. (Радовать обновить планкер).

    4 ответов

    вам нужно использовать 2 способа привязки данных.

    @Input() является одним из способов привязки данных. чтобы включить 2 способа привязки данных, вам нужно добавить @Output() соответствует свойству, с суффиксом «изменить»

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

    и в родителе вам нужно использовать обозначение banana-in-a-box для этого свойства:

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

    отредактировал ваш код немного, он работает и выглядит проще imo. Скажи, если тебе понравится.

    Как разделить родительский HTML между двумя дочерними компонентами Angular2?

    Я довольно новый для Угловых в целом. Мое приложение имеет несколько «страниц (компоненты)», что все доли вещи в общем — заголовок, общий макет страницы и т.д. Они могут делиться CSS и HTML (вместо того, чтобы она повторяется в каждом компоненте), но я не знаю, как идти о делать это. Вот по сути то, что я хочу сделать:


    Может кто-то указать мне верное направление? В и компоненты «childPage1» «otherChildPage» совершенно различны. Один имеет кучу ссылок, другую стену форматированного текста с некоторыми изображениями. Но общая компоновка страницы снаружи этих компонентов точно так же между ними.

    Надеюсь, что эта структура будет иметь смысл

    parentPage — может иметь свой общий макет

    Контейнер — может иметь свои дочерние компоненты, где вы могли выбрать правильный компонент ребенка (Это делается в соответствующем файле HTML контейнерной компонента, где вы могли бы использовать * ngIf, чтобы выбрать, какой ребенок компонент вы хотите сделать)

    Угловая является « Single рамки Page Application». Например , вы , если у вас была страница входа в ваш код может выглядеть следующим образом :

    Затем , когда пользователь входит в угловом удаляет login-component и заменяет его с profile-component

    Таким образом, вы только когда-либо 1 страница, и вы можете поменять компоненты по мере необходимости. Я бы рекомендовал после углового (2?) Учебник, который объясняет, как этого добиться.

    Angular 2 Передавать данные от родителя к дочернему с привязкой ввода

    пример

    HeroChildComponent имеет два входных свойства, обычно украшенных украшениями @Input.

    Изменяется входное свойство перехвата с помощью сеттера

    Используйте средство ввода свойств входа для перехвата и действия над значением родителя.

    Установитель свойства ввода имени в дочернем NameChildComponent обрезает пробел от имени и заменяет пустое значение текстом по умолчанию.

    Здесь NameParentComponent демонстрирует варианты имен, включая имя со всеми пробелами:

    Родитель слушает дочернее событие

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

    Свойство EventEmitter для ребенка является выходным свойством, обычно украшенным украшением @Output, как показано в этом элементе VoterComponent:

    Нажатие кнопки вызывает эмиссию истинного или ложного (булева полезная нагрузка).

    Родительский VoteTakerComponent связывает обработчик события (onVoted), который отвечает на полезную нагрузку дочернего события ($ event) и обновляет счетчик.

    Родитель взаимодействует с дочерним элементом через локальную переменную

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

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

    Давайте посмотрим на CountdownLocalVarParentComponent, на котором размещен компонент таймера.

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

    Мы можем поместить локальную переменную (#timer) в тег (), представляющий дочерний компонент. Это дает нам ссылку на сам дочерний компонент и возможность доступа к любым его свойствам или методам из родительского шаблона.

    Топ-пост этого месяца:  Анимация иконок с помощью mo.js

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

    Здесь мы видим, как родители и дети работают вместе.

    Родитель вызывает ViewChild

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

    Мы не можем использовать метод локальной переменной, если экземпляр родительского компонента должен читать или записывать значения дочерних компонентов или должен вызывать дочерние компоненты.

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

    Мы проиллюстрируем эту технику тем же самым примером таймера обратного отсчета. Мы не изменим его внешний вид или поведение. Ребенок CountdownTimerComponent тоже такой же.

    Мы переходим от локальной переменной к методу ViewChild исключительно для демонстрации. Вот родительский элемент CountdownViewChildParentComponent:

    Требуется немного больше работы, чтобы получить представление child в классе родительских компонентов.

    Мы импортируем ссылки на декоратор ViewChild и крючок жизненного цикла AfterViewInit.

    Мы добавляем дочерний объект CountdownTimerComponent в свойство private timerComponent через свойство свойства @ViewChild.

    Локальная переменная #timer удалена из метаданных компонента. Вместо этого мы привязываем кнопки к собственным методам запуска и остановки родительского компонента и представляем тикающие секунды в интерполяции вокруг метода секунд родительского компонента.

    Эти методы напрямую обращаются к инжекционному компоненту таймера.

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

    Затем «Угловой» вызывает крючок жизненного цикла ngAfterViewInit, и в это время слишком поздно обновлять отображение родительского представления секунд обратного отсчета. Правило однонаправленного потока данных Angular не позволяет нам обновлять родительское представление в том же цикле. Нам нужно подождать один оборот, прежде чем мы сможем отобразить секунды.

    Мы используем setTimeout, чтобы подождать один тик, а затем пересмотреть метод секунд, чтобы он учитывал будущие значения из компонента таймера.

    Родитель и дети общаются через службу

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

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

    Этот MissionService соединяет MissionControlComponent с несколькими детьми AstronautComponent.

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

    AstronautComponent также вводит службу в свой конструктор. Каждый AstronautComponent является дочерним элементом MissionControlComponent и поэтому получает экземпляр службы родителя:

    Обратите внимание, что мы фиксируем подписку и отписываем подписку при уничтожении AstronautComponent. Это шаг защиты от утечки памяти. В этом приложении нет реального риска, так как время жизни AstronautComponent совпадает с временем жизни самого приложения. Это не всегда было бы правдой в более сложном приложении.

    Мы не добавляем этот сторож к MissionControlComponent, потому что, как родительский, он контролирует время жизни MissionService. Журнал истории показывает, что сообщения перемещаются в обоих направлениях между родительским MissionControlComponent и детьми AstronautComponent, чему способствует услуга:

    Как использовать компонент родительского модуля в компоненте дочернего модуля в angular2

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

    Тип HeaderComponent является частью объявлений 2 модулей: AppModule и ProviderModule! Пожалуйста, рассмотрите возможность перемещения HeaderComponent в модуль более высокого уровня, который импортирует AppModule и ProviderModule.


    Вы также можете создать новый NgModule, который экспортирует и включает в себя HeaderComponent, а затем импортирует этот NgModule в AppModule и ProviderModule.

    2 ответа

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

    Используя Общий модуль:

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

    Насколько я понимаю, вы в основном хотите передать некоторые данные из родительского компонента в его дочерний компонент.

    Топ-пост этого месяца:  Настройка и запуск теста GTmetrix инструкция по анализу производительности страницы

    Для этого вам нужно использовать @Input для передачи родительских параметров child.

    Техника по построению сложных форм из вложенных компонентов в Angular

    В этой статье мы покажем, как реализовать формы из вложенных компонентов с реактивным АПИ ангуляра.

    С реактивным подходом мы создаем модель формы и передаем эту модель (или ее часть) из одного компонента другому через входящие свойства.

    Создадим реактивную форму из нескольких вложенных компонентов

    Основной компонент формы NestedFormComponent

    Давайте рассмотрим основной компонент формы NestedFormComponent и то, каким образом мы реализуем в нем будущие компоненты формы. Особенно стоит обратить внимание как мы создаем модель формы в верхнем компоненте NestedFormComponent . Модель формы будем пробрасывать в дочерние компоненты.

    Расширим форму компонентом ItemFormControlComponent

    Извлечем итем из FormArray в отдельный компонент. Назовем его ItemFormControlComponent . Передадим индекс и экземпляр FormGroup как входящие свойства. FormGroup создается функцией addItem() в компоненте ItemsFormArrayComponent .

    Также будем эмитить наверх индекс FormGroup , чтобы иметь возможность удалять компонент в родительской форме ( (removed)=»itemsFormArray.removeAt($event)» ).

    Расширим форму компонентом ItemsFormArrayComponent

    Второй шаг — извлечь массив итемов в свой собственный компонент (назовем его ItemsFormArrayComponent ). Передадим FormArrayas как входящее свойство. Отметьте небольшое изменение по сравнению с предыдущим подходом: мы запишем formArrayName=»items» на рутовом компоненте:

    Конечно, мы переиспользуем ItemFormControlComponent из предыдущего шага.

    Три компонента и директивы

    Давайте провиализируем. Красными выделены компоненты, белым директивы.

    Как вы видите, экземпляры модели формы передаются от верхнего компонента далее вниз по дереву.

    Резюме

    Модель формы сконструирована при помощи FormControl , FormArray , FormGroup . Директивы соединяют существующую модель формы внутри шаблона (реактивные формы).

    Модель формы можеь быть проброшена из одного компанента в другой через входящие свойтсва. Эта техника позволяет создавать довольно утонченные и сложные формы, которые состоят из нескольких компонентов. Реактивные формы хорошо подходят для этой идеи, позволяя относительно лекго создавать вложенные формы.

    Как использовать компонент родительского модуля в компоненте дочернего модуля в angular2

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

    Тип HeaderComponent является частью объявлений 2 модулей: AppModule и ProviderModule! Пожалуйста, рассмотрите возможность перемещения HeaderComponent в модуль более высокого уровня, который импортирует AppModule и ProviderModule.

    Вы также можете создать новый NgModule, который экспортирует и включает в себя HeaderComponent, а затем импортирует этот NgModule в AppModule и ProviderModule.

    2 ответа

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

    Используя Общий модуль:

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

    Насколько я понимаю, вы в основном хотите передать некоторые данные из родительского компонента в его дочерний компонент.

    Для этого вам нужно использовать @Input для передачи родительских параметров child.

    Как использовать 2 разных ngModel в родительском компоненте для одного дочернего компонента?

    У меня есть дочерний компонент с двумя входными текстовыми полями одновременно. Мне нужно передать ngModel для каждого из них в / родительском компоненте (конечно, в одной директиве), и оба они требуются и должны быть проверены с помощью !form.valid Как я могу это достичь? Есть ли способ, как подать иск в виде объекта для [ngModel]=»name»

    Подробнее о файлах *.ts и т. Д., Здесь Демотека StackBlitz

    1 ответ

    Почему бы не использовать @Output () и EventEmitter для выделения выходов всякий раз, когда вам нужен родительский компонент?

    angular — Использование дочернего компонента в родительском блоке в Angular 2

    У меня есть следующие 3 уровня вложенных компонентов в моем приложении Angular2. (Макет/заголовок/поиск)

    Я пытаюсь вызвать компонент поиска внутри моего header.component.html но заканчивая консольной ошибкой, говорящей

    layout.module.ts

    layout.component.html

    header.module.ts

    header.component.html

    Как вы можете видеть выше, я уже импортировал SearchComponent и объявил в @NgModule

    Если я импортирую SearchComponent в layout.module.ts (который является родительским компонентом обоих дочерних элементов), он работает как ожидалось без каких-либо ошибок.

    Я генерирую компонент, используя Angular CLI

    например: ng gc layout/home/search

    Что я здесь делаю неправильно? Как я могу использовать компонент поиска в заголовке без вызова макета? Пожалуйста, помогите мне.

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