Question

在我的angular应用程序中，我正在上传文件，该文件是子组件，而app组件是父组件。

在 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>

如果上传了个人资料图片，将显示哪个，否则该文本不会出现。.

一切正常，但是如果我们上传图片并再次将鼠标悬停在图片上，则此文本只能可见。

因此，除非用户再次将鼠标悬停在图片上，否则不会通知用户是否已上传图片。

文件上传成功后，如何在父组件（success-message）的个人资料图片下方显示app.component。

一旦文件上传到图片下方并且没有悬停，请帮我显示成功消息。不触摸子组件中的任何内容。

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

如何从父级更改子级组件？

1 个答案: