angular 8 into the pit from the study notes ~ abort (II)

• Create a setup module, the following effects FIG.

• 
• angular scaffolding components have provided templates to quickly generate
• 　　

• Perfect setup module

Because landing pages, so there will be a service designed to store user information; localStorage usually put in;

1. 1. The reason: because it will involve the routing guard, or access other modules required by the user can access the information;
   2. Since there may be a plurality of user modules with the required information, it may be agreed on the key information to the storage key (and a rear personnel may conventions, such orgadmin, groupadmin Han, hump or lowercase see claims)
   3. New localStorage Service: ng gs services / local-storage / local-storage --skipTests

      • import { Injectable } from '@angular/core';
        const ls = localStorage;
        @Injectable({
          providedIn: 'root'
        })
        export class LocalStorageService {
        
          constructor() { }
          public get<T>(key: string): any {
            return JSON.parse(ls.getItem(key)) as T; 
          }
        
          public getList<T>(key: string) {
            const before = ls.getItem(key);
            return before ? (JSON.parse(before) as T[]) : [];
          }
        
          public set(key: string, value: any): void {
            if (!value && value === undefined) { return; }
            const arr = JSON.stringify(value);
            ls.setItem(key, arr);
          }
        

        // as a type of assertion, tell the compiler what type, the same cast as the type of function;
         // const value: the any = "the Hello"; // value is an arbitrary type, will be assigned to a string value, the compiler now think it is a string type; 
        // const len: Number the = (value AS string) .length; // compiler itself needs to judge the value of value, now you tell the compiler value of type string, not the need to re-determination;

        }

   4. New Namespace file local-storage.namespace.ts, used for storing information of key-value pairs, to facilitate understanding recognition; (file name may vary with the requirements, such as character information corresponding to role.namespace.ts);

   5. // used when storing a local storage namespace namespace name may be an application module names other forms plus 
      
      Export GLOBAL_NAMESPACE const = 'Today.' ; 
      
      Export APP_INFO_NAMESPACE const = GLOBAL_NAMESPACE + 'appInfo.' ; 
      Export INIT_FLAG const = APP_INFO_NAMESPACE + 'InitFlag' ; 
      Export START_USING_DATE const = APP_INFO_NAMESPACE + 'startUsingDate';　　

   6. setup module code (setup.component.html, setup.component.sass, setup.component.ts)

      1. <div class="full-screen page-content">
             <div class="wrapper">
               <img class="logo-img" src="./assets/img/logo.png" alt="">
               <div class="text-wrapper">
                 <h1 class="title-text">
                   Today
                 </h1>
               </div>
               <input nz-input placeholder="请输入你喜欢的用户名" #usernameInput [(ngModel)]="username">
               <button nz-button [nzType]="'primary'" (click)="completeSetup()" [disabled]="!usernameInput.value">
                 开始
               </button>
               <div class="copy-right">
                 Copyright © 2020 你的笑像一只二哈
               </div>
             </div>
           </div>

      2. div.page-content {
           display: flex;
           justify-content: center;
           align-items: center;
           padding-top: 50px;
         
           .wrapper {
             display: flex;
             flex-direction: column;
             align-items: center;
             min-height: 400px;
             max-height: 420px;
             height: 60vh;
             min-width: 300px;
             width: 30vw;
             max-width: 400px;
             padding: 40px 30px 10px;
             border-radius: 8px;
             background-color: white;
         
             img.logo-img {
               flex: 0 0 120px;
               width: 120px;
               height: 120px;
             }
         
             .text-wrapper {
               flex: 1;
               display: flex;
               flex-direction: column;
               justify-content: center;
               text-align: center;
         
               .title-text {
                 font-size: 24px;
                 font-style: italic;
                 color: rgba(0, 0, 0, 0.65);
               }
             }
         
             button {
               margin-top: 26px;
               width: 100%;
             }
         
             .copy-right {
               margin-top: 30px;
               flex: 0 0 40px;
         
             }
           }
         }

      3. import { Component, OnInit } from '@angular/core';
         import { LocalStorageService } from 'src/app/services/local-storage/local-storage.service';
         import { INIT_FLAG, START_USING_DATE, USERNAME } from 'src/app/services/local-storage/local-storage.namespace';
         import { getTodayTime } from 'src/app/share/utils/time';
         
         @Component({
           selector: 'app-setup',
           templateUrl: './setup.component.html',
           styleUrls: ['./setup.component.scss']
         })
         export class SetupComponent implements OnInit {
           username: string;
           constructor( private store: LocalStorageService) { }
         
           ngOnInit() {
           }
           completeSetup(): void {
             this.store.set(INIT_FLAG, true);
             this.store.set(START_USING_DATE, getTodayTime());
             this.store.set(USERNAME, this.username);
           }
         }

          

   7. 　Run: ng serve (if there is an error message)
      1. 
      2. 
   8. Generally it refers to such problems; we do not import the relevant module, therefore, the need to import setup module, if the response to form the formula (import {FormsModule, ReactiveFormsModule} from '@ angular / forms';)
       
      1. 　　
   9. Now run, perfect ~ ~ ~ ~
   10. Recommendation: If you have multiple modules use the same module, the module can be used together to wrap ShareModule, when used in this way would just introduced ShareModule on it;