Angular2 Abonnieren Sie nicht über Service arbeiten

Question

Obwohl ich viele Male versucht habe, aber nicht arbeiten EMIT oder abonnieren.

Ich möchte app-Header, app-Sidebar und App-footer in

LoginComponent verstecken. Auch * ngIf nicht zu hören GlobalService-Variable.

Vielen Dank im Voraus für Ihre Unterstützung.

/* App HTML */ 

<app-header *ngIf="global.showHeader"></app-header> 

<app-sidebar *ngIf="global.showSidebar"></app-sidebar> 

<div class="content-wrapper"> 
    <router-outlet></router-outlet> 
</div> 

<app-footer *ngIf="global.showFooter"></app-footer> 

/* AppComponent */ 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    providers: [AppGlobalService] 
}) 
export class AppComponent implements OnInit{ 

    global = {}; 

    constructor(private globalService: AppGlobalService) { 

    this.globalService.listenUpdated.subscribe(

     data => { 

     this.global = data; 

     } 

    ); 
    } 

    ngOnInit(){ 
    } 
} 

/* AppGlobalService */ 

@Injectable() 
export class AppGlobalService { 

    data={ 
     showHeader: true, 
     showSidebar: true, 
     showFooter: true 
    }; 

    listenUpdated = new EventEmitter<any>(); 

    constructor(){} 

    updateStatus(key: any, value: any) { 
     this.data[key] = value; 
     console.log('SERVICE ', this.data); // It's working... 
    } 
} 

/* LoginComponent */ 

@Component({ 
    selector: 'app-login-index', 
    templateUrl: './index.component.html', 
    providers: [AppGlobalService] 
}) 
export class LoginIndexComponent implements OnInit { 

    private data = {}; 

    constructor(public globalService: AppGlobalService) { 
     this.globalService.updateStatus('showHeader', false); 
     this.globalService.updateStatus('showSidebar', false); 
     this.globalService.updateStatus('showFooter', false); 
     this.globalService.listenUpdated.emit(true); 
    } 

    ngOnInit() { 
    } 

} 

Answer 1

ich wie eine bessere Art und Weise fühlen, dies zu tun wäre, eine Login-Komponente zu haben, und dann lässt ein Haus Komponente sagen. Die Login-Komponente würde das HTML für eine Seitenleiste oder Fußzeile oder ähnliches überhaupt nicht enthalten.

Sie würden Routing verwenden, um zur Login-Komponente zu routen, wenn jemand nicht authentifiziert ist. Sobald sie sich über die Login-Komponente authentifiziert haben, würden Sie zur Home-Komponente weitergeleitet, wo Dinge wie eine Fußzeile und eine Seitenleiste vorhanden wären.

Es gibt eine ganze guide to routing, die Login-Funktionalität enthält. All dies ist in Live-Beispielen von dort aus sichtbar.