typescript - Cómo pasar un valor a index.html desde un componente en Angular 2

Tengo un proyecto angular2 donde index.html contiene la barra de encabezado. Otros componentes se encargarán de iniciar sesión y mostrar otras cosas.

Tengo que mostrar un logo en la barra de cabecera, que solo está presente en index.html si el usuario inicia sesión. Estoy configurando una bandera en app.component.ts si el usuario ha iniciado sesión. ¿Cómo referirse a esa bandera en index.html?

<body>
    <div class="content-body">
        <header class="header">
            <div class="header-bar container">
                <div class="header-bar__main">
                    <div class="header-heading">
                        <h1 class="page-title">noHold Application</h1>
                    </div>
                </div>
                <a class="btn btn--small btn--icon ng-scope" title="Logout"><span class="icon-sign-out"></span></a> // this line should be displayed only if user logs in.
            </div>
        </header>
        <div class="content">
            <div class="content__main">
                <div class="container">
                    <app-root>Loading... </app-root>        
                </div>
            </div>
        </div>
    </div>

</body>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  static loggedIn = false;

  getLoggedIn() {
    return AppComponent.loggedIn;
  }

}

Respuesta #1

En Angular, es una mejor práctica tener un único componente de arranque (AppComponent en muchos casos, así como en tu caso), y definir otros componentes (como encabezado, menús, contenido de la página, estado de inicio de sesión, etc.).

En este caso, te sugiero que modifiques tu app.component.html e introduzcas componentes hijos usando sus propios selectores. Por ejemplo:

app.component.html

<header></header>
<router-outlet></router-outlet>

El contenido de HeaderComponent se renderiza usando la etiqueta/selector header, mientras que el contenido de los componentes navegados (por ejemplo: AboutComponent) se renderiza usando la etiqueta/selector router-outlet.

header.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent {
  public loggedIn = false;

  ...
}

header.component.html

  <header class="header">
    <div class="header-bar container">
      <div class="header-bar__main">
        <div class="header-heading">
          <h1 class="page-title">noHold Application</h1>
        </div>
      </div>
      <div *ngIf="loggedIn">
        <a class="btn btn--small btn--icon ng-scope" title="Logout"><span class="icon-sign-out"></span></a>
      </div>
    </div>
  </header>

Espero que sea útil.

Respuesta #2

Ten cuidado de no acoplar tus componentes. Un componente no debería acceder a las propiedades de otro componente. Hay muchas maneras de desacoplar componentes. En tu caso, una buena opción podría ser compartir datos comunes entre componentes.

Aquí hay un ejemplo rápido de implementación. Crea una clase que represente a tu usuario:

class User {
  firstName: string;
  lastName: string;
  ...
}

Crea una clase que contenga el estado de sesión de tu usuario:

class Session {
  user: User;
  isLogged: boolean;

  login(user: User) {
    this.user = user;
    this.isLogged = true;
  }
}

Luego, configure su módulo de aplicación para inyectar una instancia de la clase Session como un singleton:

@NgModule({
  ...
  providers: [
    ...
    { provide: 'session', useValue: new Session() },
    ...
  ],
  ...
})

Ahora en todos tus componentes, puedes inyectar tu sesión. Un ejemplo en el componente de inicio de sesión que establece el usuario cuando se autentica:

@Component({
  ...
})
class LoginComponent {
  constructor(private session: Session) {
  }

  private login() {
    let user = ....;  // Retrieve user from backend service...
    this.session.login(user);
  }
}

Y también puedes usar la sesión en tus plantillas :

<div *ngIf="session.isLogged">
  <a class="btn btn--small btn--icon ng-scope" title="Logout"><span class="icon-sign-out"></span></a>
</div>