Set up base href

ng build --base-href "/" --prod

async The use of pipes

<ng-container *ngIf="num|async;let add;">
  <h1>{{add}}</h1>
</ng-container>

num=of(1)

Exclude theme files

angular.json

<>
"styles": [
    "src/styles.css",
    {
      "input": "src/styles/themes/theme-light.css",
      "inject": false,
      "bundleName": "theme-light"
    },
    {
      "input": "src/styles/themes/theme-dark.css",
      "inject": false,
      "bundleName": "theme-dark"
    }
  ]

1. inject: Set this false From... Will not be included “ Input ” Package with path
2. bundleName： A separate package will be created , It contains information from “ Input ” Style sheet for path

It can be done by simply inject Set... In the workspace configuration file false To exclude style sheets , namely angular.json. To load them on demand , We will use this bundleName Options

angular The form cannot get the disabled value

use getRawValue()

ng-content slot

Named slots are mapped in the form of attributes , Use <ng-template> perhaps div

 Father 
<app-three>
  <ng-container *ngTemplateOutlet="aaa" attr1></ng-container>
</app-three>
<!-- This way of writing is to prevent the current component from looking so simplistic -->
<ng-template #aaa >
  <p>This is another element to project into component</p>
</ng-template>

 Son 
<ng-content select="[attr1]"></ng-content>

If you want to use ng-container, We found it possible to write multiple at once

 Father 
<ng-container ngProjectAs="complex-ele">
  <h1>     I am the judge </h1>
</ng-container>
 Son 
<ng-content select="['complex-ele','complex-ele1']"></ng-content>

I suddenly found that it can be projected without writing in the parent component class

angular internationalization

install

npm install @ngx-translate/core @ngx-translate/http-loader

app.module.ts

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient],
      },
      defaultLanguage: 'en-US',
    }),
    FormsModule,
    HttpClientModule,
    BrowserAnimationsModule
  ],
  providers: [{provide: NZ_I18N, useValue: zh_CN}],
  bootstrap: [AppComponent]
})

stay /assets/i18n/ New inside en-US.json and zh-CN.json

{
  "hello": "Hello, {{name}}!"
}

{
  "hello": " Hello  {{name}}!"
}

It is used in components

export class TwoComponent implements OnInit {
  constructor(public translateService: TranslateService) {
  }
  public changeLanguage(language: string): void {
    console.log(language);
    this.translateService.use(language);
  }
  ngOnInit(): void {
  }

}

html

<h3>{{ "hello" | translate: { name: "Angular" } }}</h3>
<button nz-button nzType="default" (click)="changeLanguage('zh-CN')">CLick</button>

rxjs EMPTY

EMPTY Immediately complete And don't emit any values .

import { EMPTY } from 'rxjs';

EMPTY.subscribe({
  next: () => console.log('Next'),
  complete: () => console.log('Complete!')
});
// Complete!

When we encounter errors in the process , We don't want internal logic subscribe happen , We can use EMPTY Complete immediately after the error occurs

 throwError('error1').pipe(
      catchError(err=>{
        console.log(' Report errors 1');
        return EMPTY
      })
    ).subscribe(res=>{
      console.log(' Is it implemented ');
    })
//  Report errors 1
//  So our EMPTY Will make subscribe Don't execute 

rxjs defer

establish Observable, That is, it is created only when it is subscribed .

Suppose we want to have a random number in each new subscription . With defer It's possible

 const s1 = defer(() =>of(Math.floor(Math.random()*100)));
    s1.subscribe(console.log);
    s1.subscribe(console.log);

For comparison , If we use of, We get the same number every time

 const s= of(Math.floor(Math.random()*100));
    s.subscribe(console.log);
   s.subscribe(console.log);

rxjs defaultIfEmpty

If the source Observable The result is empty. , Then this operator will emit the default value .

When our Observable Only issued complete when , No value has been issued before , defaultIfEmpty Insert the issue into its value .

 let result = of().pipe(defaultIfEmpty<any>(' Default value '));
    result.subscribe(x => console.log(x));

We can think about , If the return of the request is empty , We can set the default value

rxjs generate

Generate a by running a state driven loop Observable, The loop emits an element at each iteration

generate(
  2,
  x => x <= 20,
  x => x + 3,
  x => '#'.repeat(x)
).subscribe(console.log);

/**
##
#####
########
###########
##############
#################
####################
*/

generate Like a for loop

• 2 Set the value of the
• x<=20 Condition of circulation
• x+3 Parameters added per cycle
• '#'.repeat(x) The last one is the value you return from the loop

pluck

Map each source value to its specified nested attribute .

    of({ firstName: 'Cloe', lastName: 'Liz' }).pipe(pluck('firstName')).subscribe(console.log)
    // Cloe

In short , It's like using map Map a value to one of its members , But it saves the template for writing it .

pipe(map(v => v.firstName))
//  Same effect