单击按钮重新加载 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 订阅找到了另一种方法。 但问题是我订阅了一个元素，我不必更改任何 state，这会对 HTML 进行任何更改。 所以我不知道我的组件是否被重新加载。 为了重新加载组件，是否必须对 DOM 元素进行任何更改？

Answer 1

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

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

以下 function 将更新您的数据：

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

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

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

希望有帮助！

编辑：

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

  @Input()
  yourObservable: Observable<string>;

并在您的父组件中：

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