8 angular en la fosa de las notas de estudio ~ aborto (II)

Crear un módulo de configuración, la figura efectos siguientes.

componentes de andamiaje angulares han proporcionado plantillas para generar rápidamente

módulo de configuración perfecta

Debido a que las páginas de destino, por lo que habrá un servicio diseñado para almacenar información de usuario; localStorage suele poner en;

La razón: porque va a implicar la guardia de enrutamiento, o acceder a otros módulos requeridos por el usuario puede tener acceso a la información;
Dado que puede haber una pluralidad de módulos de usuario con la información requerida, se puede acordar en la información clave para la clave de almacenamiento (y un personal traseras puede convenciones, tales orgadmin, groupadmin Han, joroba o minúsculas ver reivindicaciones)

Nuevo Servicio: localStorage --skipTests ng servicios gs / local de almacenamiento / locales de almacenamiento

importación {inyectable} de '@ angular / núcleo' ; 
const ls = localStorage; 
@Injectable ({ 
  providedIn: 'root' 
}) 
LocalStorageService clase de exportación { 

  constructor () {} 
  get pública <T> (clave: string): ninguna {
     volver JSON.parse (ls.getItem (clave)) como T; 
  } 

  GetList pública <T> (clave: string) { 
    const antes = ls.getItem (clave);
    volver antes? (JSON.parse (antes) como T []): []; 
  } 

  Conjunto pública (clave: cadena, valor: las hay): void {
     si(! valor && valor === indefinido) { retorno ; } 
    Const arr = JSON.stringify (valor); 
    ls.setItem (clave, arr); 
  }

// como un tipo de afirmación, decirle al compilador qué tipo, el mismo reparto como el tipo de función;
 // valor const: los any = "Hello"; // valor es un tipo arbitrario, será asignado a un valor de cadena, el compilador ahora creo que es un tipo de cadena; 
// const len: Number = (valor As string); // .length propio compilador necesita para juzgar el valor de valor, ahora le dice al compilador de valor de tipo cadena, no la necesidad de re-determinación;

Espacio de nombres de archivo nuevos locales-storage.namespace.ts, que se utiliza para almacenar información de pares de valores clave, para facilitar el reconocimiento comprensión; (nombre del archivo puede variar con los requisitos, tales como información de carácter correspondiente al role.namespace.ts);

// usa para guardar un nombre de espacio de nombres de espacio de nombres de almacenamiento local puede ser un nombres de los módulos de aplicación, además de otras formas 

const exportación GLOBAL_NAMESPACE = 'Hoy'. ; 

Exportación APP_INFO_NAMESPACE const = GLOBAL_NAMESPACE + 'AppInfo.' ; 
Exportación INIT_FLAG const = APP_INFO_NAMESPACE + 'InitFlag' ; 
exportación START_USING_DATE const = APP_INFO_NAMESPACE + 'startUsingDate';

código del módulo de configuración (setup.component.html, setup.component.sass, setup.component.ts)

< Div clase = "pantalla completa página de contenido" > 
    < div clase = "contenedor" > 
      < img clase = "logo-img" src = "./ activos / img / logo.png" alt = "" > 
      < div clase = "text-wrapper" > 
        < h1 clase = "título de texto" > 
          Hoy 
        </ h1 > 
      </ div > 
      < entrada de marcador de posición de entrada NZ- = "请输入你喜欢的用户名"#usernameInput [(ngModel)] = "nombre de usuario" > 
      <botón de NZ-botón [nzType] = " 'primaria'" (clic) = "completeSetup ()" [desactivado] = "! usernameInput.value" > 
        开始
      </ botón > 
      < div clase = "copy-right" > 
        Copyright © 2020你的笑像一只二哈
      </ div > 
    </ div > 
  </ div >

div.page de contenido { 
  display : flexión ; 
  justificar contenido : centro ; 
  align-artículos : centro ; 
  padding-top : 50px ; 

  .wrapper { 
    display : flexión ; 
    flex-dirección : columna ; 
    align-artículos : centro ; 
    min-altura : 400px ; 
    max-height : 420px ; 
    altura : 60vh ; 
    min-width :300px ; 
    anchura : 30vw ; 
    max-ancho : 400px ; 
    padding : 40px 30px 10px ; 
    frontera de radio : 8px ; 
    background-color : blanco ; 

    img.logo-img { 
      flex : 0 0 120px ; 
      anchura : 120px ; 
      altura : 120px ; 
    } 

    .Text-wrapper { 
      flex : 1 ; 
      display : Flex; 
      flex-dirección : columna ; 
      justificar contenido : centro ; 
      text-align : centro ; 

      .title-text { 
        font-size : 24px ; 
        font-style : cursiva ; 
        de color : RGBA (0, 0, 0, 0,65) ; 
      } 
    } 

    Botón { 
      margin-top : 26px ; 
      anchura : 100% ; 
    } 

    .Copy derecha { 
      margin-top: 30px ; 
      flex : 0 0 40px ; 

    } 
  } 
}

importación {Componente, OnInit} de '@ angular / núcleo' ; 
{} la importación de LocalStorageService 'src / app / servicios / local de almacenamiento / local-storage.service' ; 
importación {INIT_FLAG, START_USING_DATE, username} de 'src / app / servicios / local de almacenamiento / local-storage.namespace' ; 
{} la importación de getTodayTime 'src / app / share / utils / hora' ; 

@Component ({ 
  selector: 'App-setup' , 
  templateUrl: './setup.component.html' , 
  styleUrls: [ ' ./setup.component.scss' ] 
}) 
de clase exportación implementos SetupComponent OnInit { 
  nombre de usuario: string; 
  constructor (almacén privado:

  ngOnInit () { 
  } 
  completeSetup (): void {
     este .store.set (INIT_FLAG, verdadera );
    este .store.set (START_USING_DATE, getTodayTime ());
    este .store.set (nombre de usuario, este .username); 
  } 
}

　Ejecutar: ng servir (si hay un mensaje de error)
Generalmente se refiere a este tipo de problemas; no importar el módulo relevante, por lo tanto, la necesidad de módulo de configuración de importación, si la respuesta para formar la fórmula (importación {FormsModule, ReactiveFormsModule} de '@ formas / angulares';)
1. 　　
Ahora corre, perfeccionar ~ ~ ~ ~
Recomendación: Si tiene varios módulos utilizan el mismo módulo, el módulo puede ser utilizado en conjunto para envolver ShareModule, cuando se usa de esta manera solo sería introducido ShareModule en él;

8 angular en la fosa de las notas de estudio ~ aborto (II)

Crear un módulo de configuración, la figura efectos siguientes.

módulo de configuración perfecta

Supongo que te gusta