javascript - 单击按钮重新加载 Angular 组件

Question

我正在开发一个 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>

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

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

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

希望对您有所帮助!

编辑:

正如我在您的评论中注意到的那样，您的刷新按钮位于父组件中。在这种情况下，您可以在您的父组件中实现您的可观察对象，并在您的组件中使用输入:

  @Input()
  yourObservable: Observable<string>;

在你的父组件中:

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