如何從父級更改子級組件？

Question

在我的角度應用程序中，我正在上傳一個文件，它是一個子組件，而應用程序組件是父組件。

在app.component.html （父類）中，我只有一行代碼，該代碼會調用子組件，例如：

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

我絕對不能在我的真實應用程序中編輯子組件，所以請不要在子組件（ profile-image.component ）中進行任何編輯，因為它是一個庫，並且我沒有任何代碼。

工作示例： https : //stackblitz.com/edit/angular-file-upload-preview-6f4o8w

我的要求是，您可以在子組件中看到（僅供參考），

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

如果上傳了個人資料圖片，將顯示該內容，否則該文本不會出現。

一切正常，但是只有當我們上傳圖像並再次將鼠標懸停在圖像上時，該文本才可見 。

因此，除非再次將鼠標懸停在圖像上，否則用戶不會收到是否已上傳圖像的通知。

因此，一旦文件成功上傳，我該如何在父組件（ app.component ）的配置文件圖像下方顯示success-message 。

將文件上傳到圖片下方后， 如果沒有觸摸子組件中的任何內容，就不要懸停，請幫助我顯示成功消息。

Answer 1

您不妨顯示實際的子組件，這樣您就可以節省每個人的工作量。 對於您顯示的示例，可以在父級中使用子級組件的引用變量。

<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