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

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>

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

我还找到了另一种使用角度订阅的方法。但问题是我订阅了一个元素，我不必更改任何对 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>

希望有帮助！

编辑：

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

  @Input()
  yourObservable: Observable<string>;

在你的父组件中：

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