Хобрук: Ваш путь к мастерству в программировании

Как общаться с дочерней страницы на родительской с помощью EventEmitters

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

родитель.html: -

<ion-header>

  <ion-navbar>
    <button menuToggle left>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>{{title}}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
</ion-content>

парнет.тс:

export class Parent{
  title:string;
  getNotification(evt) {
    this.title = ""+evt;
   }
}

ребенок.html:

<ion-content padding>
    <h2>Grocery Page</h2>
    <button ion-button (click)="sendNotification()" color="secondary" full>Notify my parent!</button>
</ion-content>

ребенок.тс:

export class Child{

  @Output() notifyParent: EventEmitter<any> = new EventEmitter();
  sendNotification() {
    this.notifyParent.emit('Parent Page');
   }
}

  • как называется дочерний элемент 06.07.2018
  • я обновил свой код, пожалуйста, проверьте сейчас 06.07.2018
  • до сих пор не публикует селектор дочерних компонентов 06.07.2018
  • я обновил, пожалуйста, проверьте сейчас 06.07.2018

Ответы:


1

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

<child-component (notifyParent)="getNotification($event)"></child-component>

А вот простая ДЕМО.

06.07.2018

2

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

<child (notifyParent) = "getNotification($event)"></child>

Дочерний компонент:

export class Child{

   @Output() notifyParent: EventEmitter<string> = new EventEmitter();

   sendNotification() {
     this.notifyParent.emit('Parent Page');
   }
}

Родительский компонент:

export class Parent{
  title:string;
  getNotification(evt) {
     this.title = evt;
  }
}
06.07.2018
  • если мне нравится этот пользовательский интерфейс дочерней страницы, он отображается в пользовательском интерфейсе моей родительской страницы 06.07.2018
  • Я просто хочу изменить заголовок панели действий родительской страницы с дочерней страницы 06.07.2018
  • Вся концепция дочернего компонента такова. Находиться внутри пользовательского интерфейса родительского компонента. Если вы просто хотите изменить заголовок из другого места, используйте для этого службу. 06.07.2018
  • о, разве это невозможно с помощью EventEmiters? 06.07.2018
  • Где ваша дочерняя страница, не внутри вашего родителя? 06.07.2018
  • Дочерняя страница является одной из страниц вкладок на родительской странице. 06.07.2018
  • Новые материалы

    Понимание СТРУКТУРЫ ДАННЫХ И АЛГОРИТМА.
    Что такое структуры данных и алгоритмы? Термин «структура данных» используется для описания того, как данные хранятся, а алгоритм используется для описания того, как данные сжимаются. И данные, и..

    Как интегрировать модель машинного обучения на ios с помощью CoreMl
    С выпуском новых функций, таких как CoreML, которые упростили преобразование модели машинного обучения в модель coreML. Доступная модель машинного обучения, которую можно преобразовать в модель..

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

    Технологии и проблемы будущей работы
    Изучение преимуществ и недостатков технологий в образовании В быстро меняющемся мире технологии являются решающим фактором в формировании будущего работы. Многие отрасли уже были..

    Игорь Минар из Google приедет на #ReactiveConf2017
    Мы рады сообщить еще одну замечательную новость: один из самых востребованных спикеров приезжает в Братиславу на ReactiveConf 2017 ! Возможно, нет двух других кланов разработчиков с более..

    Я собираюсь научить вас Python шаг за шагом
    Привет, уважаемый энтузиаст Python! 👋 Готовы погрузиться в мир Python? Сегодня я приготовил для вас кое-что интересное, что сделает ваше путешествие более приятным, чем шарик мороженого в..

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