单击按钮重新加载角度组件

Posted 2023-02-23

【中文标题】单击按钮重新加载角度组件

【英文标题】：Reload angular component with button click

【发布时间】：2020-03-13 19:09:48

【问题描述】：

我正在开发一个 Angular 8 应用程序。在该应用程序中，当单击另一个组件内部的按钮时，我想重新加载一个组件。我找到了一种使用路由器的方法，首先导航到示例组件，然后导航到实际组件如下代码所示。

this.router.navigateByUrl('/SampleComponent',  skipLocationChange: true );
this.router.navigate(["yourLandingComponent"]);

但在这个应用程序中，我没有使用路由器。这是一个简单的单页应用程序。我已经使用ngIf 来渲染组件，如下所示。

<div class="row main-wrapper">
    <app-section-rental class="container-fluid p-0" *ngIf="tabset.tab0"></app-section-rental>
    <app-section-insuarance class="container-fluid p-0" *ngIf="tabset.tab1"></app-section-insuarance>
    <app-section-additionals class="container-fluid p-0" *ngIf="tabset.tab2"></app-section-additionals>
    <app-section-optionals class="container-fluid p-0" *ngIf="tabset.tab3"></app-section-optionals>
    <app-price-breakdown class="container-fluid p-0" *ngIf="tabset.tab4"></app-price-breakdown>
</div>

所以我想知道如何通过单击另一个组件内部的按钮来重新加载我的组件。

我还找到了另一种使用角度订阅的方法。但问题是我订阅了一个元素，我不必更改任何对 html 进行任何更改的状态。所以我不知道我的组件是否被重新加载。为了重新加载组件，是否必须对 DOM 元素进行任何更改？

【问题讨论】：

嗨，欢迎来到 SO。请Read how to ask Question

@hackerbuddy，你可以有一个函数“刷新”，在ngOnInit中调用，在按钮的（点击）中调用。嗯，这是一个普遍的想法。真的我不太明白什么是：“刷新组件”

@KrunalShah 谢谢老兄...这真的很有帮助..！

@Eliseo 谢谢老兄...应该重新加载...我更改它...但问题是我的按钮在另一个组件中。所以我不能从另一个组件调用一个组件的 ngOnInit

如果存在父子关系，只需使用@Output() refresh=new EventEmitter<any>() 发出一个值，就像文档说的angular.io/guide/… 一样

【参考方案1】：

您可以使用来自rxjs 的 Obersavables。 这个 Observable 包含在你的组件中显示/更新的数据。

private _testSubject = new BehaviorSubject<string>('old data');
testObservable$: Observable<string> = this._testSubject.asObservable();

以下函数将更新您的数据：

public refresh()
   this._testSubject.next('new Data');

在刷新按钮的onClick 上调用此函数。 最后，您可以像这样在组件 html 中使用 Observable：

<div>
   (testObservable$|async)
</div>

希望有帮助！

编辑：

正如我在您的 cmets 中注意到的，您的刷新按钮位于父组件中。在这种情况下，您可以在父组件中实现您的 observable，并在您的组件中使用输入：

  @Input()
  yourObservable: Observable<string>;

在你的父组件中：

<app-your-compomemt [yourObservable]="testObservable$"></app-your-compomemt>

【讨论】：

谢谢老兄...但是我对主题进行了同样的尝试。但问题是我没有更改该组件的 DOM 元素中的任何内容。所以仅仅因为改变了一个组件的状态，没有对 DOM 元素做任何改变，我的组件就会被重新加载。

@hackerbuddy 您可以在您的组件中使用“@Input”并从您的父组件操作您的 Obersavble/Subject，如我的编辑中所述