Question

虽然我已经尝试了很多次，但没有使用EMIT或SUBSCRIBE。

我想在

中隐藏app-header，app-sidebar和app-footer

LoginComponent。另外* ngIf没有监听GlobalService变量。

提前感谢您的支持。

/* 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

我觉得更好的方法是拥有一个登录组件，然后让我们说一个家庭组件。 Login组件不会包含侧边栏或页脚的html或类似的任何内容。

当有人未经过身份验证时，您将使用路由来路由到登录组件。一旦他们通过登录组件进行身份验证，您将路由到主页组件，其中会出现页脚和侧栏等内容。

整个guide to routing包含登录功能。所有这些都可以从那里的实例中看到。

Angular2订阅不工作服务

1 个答案: