Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript: Angular 2, AngularJS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.80/5: Рейтинг темы: голосов - 5, средняя оценка - 4.80
-wantToKnow-
0 / 0 / 1
Регистрация: 08.05.2018
Сообщений: 2
1

Angular2: Управление компонентом из других компонентов

08.05.2018, 14:48. Просмотров 934. Ответов 2

Здравствуйте! Только приступил к изучению веб-программирования и, в частности, ангулара2.
Реализую проект, в процессе чего появляется множество вопросов. Один из них хочу обсудить с вами, дорогие коллеги.
Расклад такой: у меня есть несколько компонентов (меню, создание пользователей, авторизация и т.д.). Я написал и добавил на самый верх компонент "всплывающее окно уведомлений" (ну или как-то так). Там отображается результат выполнения операций пользователя (включая отображение серверных ошибок или уведомления об успешном выполнении операции).
Так вот... у меня возник вопрос как управлять этим самым окошком уведомлений (назову его alert-window).
Например, в компоненте "создание пользователей" мне нужно вывести мой alert-window: я должен заинжектить alert-window компонент и вызвать у него метод show?
Или это нарушает идеологию ангулара?
Может нужна какая-то прослойка? Теряюсь в догадках. Подскажите, пожалуйста
0
Лучшие ответы (1)
QA
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
08.05.2018, 14:48
Ответы с готовыми решениями:

Взаимодействие компонентов Angular2
Есть два компонента. Оба не главные. Хочу в один из них подгрузить второй, и обратиться к свойства...

Управление компонентом WebBrowser
Здраствуйте, многоуважаемые. Я начинающий программист, до C# писал разве что на Turbo C/Paskal лет...

Управление компонентом Windows Media Player
Доброго времени суток. Подскажите команды по управлению WMP в С++ Builder. Тоесть не удаленно а я...

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

Анимация кнопок и других компонентов
Добрый день! Возможно ли сделать анимацию кнопки? Например наводишь на неё и она немного...

2
LeniumSoft
1442 / 834 / 150
Регистрация: 06.06.2012
Сообщений: 2,370
Завершенные тесты: 1
08.05.2018, 15:58 2
Цитата Сообщение от -wantToKnow- Посмотреть сообщение
Или это нарушает идеологию ангулара?
Может нужна какая-то прослойка? Теряюсь в догадках. Подскажите, пожалуйста
Для таких уведомлений можно создать сервис.
И его инжектить куда угодно.
Компонент, который отображает уведомления, подписывается на событие с новыми сообщениями и отображает их.

И у тебя будет возможность откуда угодно из кода создать новое уведомление.
Ну и подписаться сколько угодно раз! Например подпишешь компонент, который их отображает на странице. А другой сервис подпишешь для отображения этих уведомлений как Push браузера.
Короче гибкость будет отличная и нарушать ничего не будешь
0
-wantToKnow-
0 / 0 / 1
Регистрация: 08.05.2018
Сообщений: 2
08.05.2018, 19:05  [ТС] 3
Лучший ответ Сообщение было отмечено -wantToKnow- как решение

Решение

Спасибо за ответ! Но с событиями я решил не возиться пока - мало пока знаю ещё.
Решил замутить через сервис.
Прикладываю получившуюся примерную схему взаимодействия (нарисовал как сумел )

А вот код:
К примеру, CreateUsersComponent может вызвать алерт:
this.alertService.alertError(errorMessage, exceptions);

AlertService содержит следующие методы:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
public alertError(errorMessage: string, exceptions: Array<AmsException>): void {
    this.message = "Ошибка: " + errorMessage;
    this.exceptions = exceptions;
    this.closeAlert(false);
 
    document.getElementById(AlertService.alertDivId).classList.remove("alert-success");
    document.getElementById(AlertService.alertDivId).classList.add("alert-danger");
    document.getElementById(AlertService.alertDivId).classList.add("show");
 
    this.delayClose();
}
 
public getExceptions(): Array<AmsException> {
    return this.exceptions;
}
 
public getMessage(): string {
    return this.message;
}
В свою очередь Alert.html тянет из своего ts методы (чтобы не напрямую в сервис - некрасиво)
HTML5
1
2
3
4
5
6
7
8
9
<div class="row justify-content-end fixed-top p-3 pr-4">
  <div #alert id="alert" class="col-3 alert fade shadow rounded" (mouseenter)="keepShow()" >
    <button type="button" class="close" (click)="closeAlert(true)">
      <i class="far fa-check-circle"></i>
    </button>
    <h5> {{getMessage()}} </h5>
    <p *ngFor="let exception of getExceptions()">{{exception.exception}}</p>
  </div>
</div>
Т.е. Alert.ts лишь прокси до сервиса

Javascript
1
2
3
4
5
6
7
8
9
10
11
private closeAlert(closeWithFade: boolean): void { 
    this.alertService.closeAlert(closeWithFade);
}
 
private getMessage(): string {
    return this.alertService.getMessage();
}
 
private getExceptions(): Array<AmsException> {
    return this.alertService.getExceptions();
}
0
Миниатюры
Angular2: Управление компонентом из других компонентов  
Answers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
08.05.2018, 19:05

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

CheckBox и свойство Enabled у других компонентов
Здравствуйте. У меня на форме имеется 1 лэйбл и 1 эдит, у них свойство Enabled=false. Я хочу чтобы...

Как добавить на Panel несколько других компонентов?
Как на панеле разместить несколько других компонентов, например: RadioButton, две SpeedButton, две...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru