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"
}
]
inject
: Set this false From... Will not be included “ Input ” Package with pathbundleName
: 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