Question

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

any other middleware

在showrequestcomponent.ts中-

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

</table>
<router-outlet></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();
        }
}

父组件不可见

1 个答案: