WedX - журнал о программировании и компьютерных науках

Angular 2 Как сделать так, чтобы div отображался в родительском контейнере

Я хотел бы, чтобы мое модальное всплывающее окно загружалось в родительском компоненте (например, «app.component.ts»). Причина в том, что мне нужно вызывать его несколько раз в приложении, и я не хочу вставлять его на каждую страницу.

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

17.03.2017

Ответы:


1

Вы всегда можете передать событие родителю (app.component), чтобы показать модальное всплывающее окно.

app.component.html

<div>
     <child-component (onShow)="showPopup($event)"></child-component>
</div>

app.component.ts

public showPopup(show : boolean){
   if(show){
   /* code to show popup goes there */
   }
}

child.component.ts

@Output() onShow= new EventEmitter()<boolean>; 

    public someFunc(){
    /*once you are ready to show popup */
    this.onShow.emit(true);
    }
17.03.2017
  • Привет спасибо. Просто пытаюсь это сделать, но мой текстовый редактор говорит, что не может найти имя Output и не может найти имя EventEmitter. 17.03.2017
  • Вам нужно их импортировать. import {Output, EventEmitter} from '@angular/core'; 17.03.2017
  • @AndrewJuniorHoward Если мой ответ решил вашу проблему, не могли бы вы принять ответ? Спасибо. 08.06.2017
  • Новые материалы

    Как создать диаграмму градиентной кисти с помощью D3.js
    Резюме: Из этого туториала Вы узнаете, как добавить градиентную кисть к диаграмме с областями в D3.js. Мы добавим градиент к значениям SVG и применим градиент в качестве заливки к диаграмме с..

    Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
    Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..

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

    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..

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

    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..


    Для любых предложений по сайту: [email protected]