javascript - 如何从父组件更改子组件？

问题描述

在我的角度应用程序中，我有一个文件上传，它是一个子组件，而应用程序组件是父组件。

在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

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

标签： javascriptangulartypescriptinputangular5

您不妨展示实际的子组件，这样您将节省每个人的努力。对于您展示的示例，您可以在父组件中使用子组件的引用变量。

<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

javascript - 如何从父组件更改子组件？

问题描述

解决方案

推荐阅读