父组件不可见

在角度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;
}

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

回答(1)

3 years ago

这是应用程序状态管理的一个案例 . 您应该使用单个服务,其中存储组件的“可见性”状态以及组件(父,子等),通过服务订阅这些状态 . 每当更改可见性状态时,它都会在服务中更改,并且订阅这些状态的所有组件都将反映更改 .

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;
        });
    }

}

You can toggle the flag from anywhere in the code.

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

        constructor(private service: AppStoreService ) { }

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