Как внести изменения в дочерний компонент от родительского? - PullRequest
Новая
       24

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

0 голосов
/ 10 января 2019

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

В app.component.html (родительский) у меня только однострочный код, который вызывает дочерний компонент, например, 

<app-profile-image></app-profile-image>

Ни в коем случае я не могу редактировать дочерний компонент в моем реальном приложении , поэтому, пожалуйста, не редактируйте ничего в дочернем компоненте (profile-image.component), потому что это библиотека, и у меня нет кода это.

Рабочий пример: https://stackblitz.com/edit/angular-file-upload-preview-6f4o8w

Мое требование: вы можете видеть в дочернем компоненте (см. Ref), 

<h4 class="success-message" *ngIf="url"> Uploaded Successfully </h4>

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

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

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

Так как я могу отобразить success-message под изображением профиля в родительском компоненте (app.component) после успешной загрузки файла.

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

1 Ответ

0 голосов
/ 10 января 2019

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

<app-profile-image #iAmNotReal></app-profile-image>
<h3> Success message can be displayed here </h3>

<b *ngIf="childComp?.url">Picture uploaded sucessfully</b>

export class AppComponent  {
  @ViewChild('iAmNotReal') childComp;
}

https://stackblitz.com/edit/angular-file-upload-preview-w5qwha?file=app%2Fapp.component.ts

...