父组件不可见

Question

在 Angular 2 中，我有一个父组件，它在点击时显示子组件路由。因此，我在单击按钮时使用 ngIf 切换父组件的可见性。但是当这个父组件本身被其父组件直接调用时，Oninit 方法不会切换父组件。 因此，当单击父组件的父级时，不会显示任何内容。我必须先打开一个不同的组件，然后单击链接以打开特定的父组件，否则不会显示任何内容。请帮忙。在 showrequest 组件 html 中 -

<table *ngIf = "flag" class="table table-bordered info-table">

</table>
<router-outlet></router-outlet>

在 showrequestcomponent.ts -

ngOnInit() {
this.flag = 1;
}

toggle(){
this.flag = 0;
}

点击按钮时，toggle 方法会隐藏父组件，只有 router-outlet 子组件可见。 但是，当我再次单击 show-component 父级上的按钮以显示 showcomponent 时， Oninit 方法不会触发，因为它从未超出此组件，因此这次没有显示任何内容。我必须先转到其他一些组件，然后再回到 show-component 来查看这个组件。

Answer 1

这是一个应用状态管理的案例。您应该使用单个服务，其中存储了组件的“可见性”状态，并在组件（父、子等）中，通过服务订阅这些状态。每当可见性状态发生变化时，它都会在服务中发生变化，并且订阅这些状态的所有组件都会反映这些变化。

Observables and Data Sharing

app-state.service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({
    providedIn: 'root'
})
export class AppStoreService {

    private _parentIsVisible: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);

    // Subscribe to this variable
    public parentIsVisible: Observable<boolean> = this._parentIsVisible.asObservable();

    public toggleVisibility(): void {
        this._parentIsVisible.next(!this._parentIsVisible.value);
    }
}

parent.component.html

<table *ngIf="isVisible">
//
</table>
<router-outlet></router-outlet>

parent.component.ts

@Component({
    \\
})
export class ParentComponent {

    // use this variable in html
    isVisible: boolean;

    constructor(private service: AppStoreService ) { }

    ngOnInit() {
        this.service.parentIsVisible.subscribe(res => {
            this.parentIsVisible = res;
        });
    }

}

您可以在代码中的任何位置切换标志。

@Component({
        \\
    })
    export class SomeComponent {

        constructor(private service: AppStoreService ) { }

        toggleVisibility() {
            this.service.toggleVisibility();
        }
}