tsai
/
abp
mirror of https://github.com/abpframework/abp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Update Angular docs to use inject() for DI 

Refactored Angular documentation examples to use the inject() function for dependency injection instead of constructor injection. This aligns the docs with Angular's recommended DI approach and improves code clarity for service and component instantiation.
pull/23275/head
Fahri Gedik 1 year ago
parent
ccf3e7c239
commit
5da47ff38b
5 changed files with 57 additions and 74 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 38
      docs/en/framework/ui/angular/how-replaceable-components-work-with-extensions.md
  2. 13
      docs/en/framework/ui/angular/http-error-reporter-service.md
  3. 58
      docs/en/framework/ui/angular/permission-management-component-replacement.md
  4. 4
      docs/en/framework/ui/angular/theming.md
  5. 18
      docs/en/modules/setting-management.md

38
docs/en/framework/ui/angular/how-replaceable-components-work-with-extensions.md
View File

@ -17,6 +17,10 @@ yarn ng generate component my-roles/my-roles --flat --export
Open the generated `src/app/my-roles/my-roles.component.ts` file and replace its content with the following: Open the generated `src/app/my-roles/my-roles.component.ts` file and replace its content with the following:
```js ```js
import { Component, Injector, inject, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { finalize } from 'rxjs/operators';
import { ListService, PagedAndSortedResultRequestDto, PagedResultDto } from '@abp/ng.core'; import { ListService, PagedAndSortedResultRequestDto, PagedResultDto } from '@abp/ng.core';
import { eIdentityComponents, RolesComponent } from '@abp/ng.identity'; import { eIdentityComponents, RolesComponent } from '@abp/ng.identity';
import { IdentityRoleDto, IdentityRoleService } from '@abp/ng.identity/proxy'; import { IdentityRoleDto, IdentityRoleService } from '@abp/ng.identity/proxy';
@ -27,9 +31,6 @@ import {
FormPropData, FormPropData,
generateFormFromProps generateFormFromProps
} from '@abp/ng.components/extensible'; } from '@abp/ng.components/extensible';
import { Component, Injector, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { finalize } from 'rxjs/operators';
@Component({ @Component({
selector: 'app-my-roles', selector: 'app-my-roles',
@ -40,13 +41,18 @@ import { finalize } from 'rxjs/operators';
provide: EXTENSIONS_IDENTIFIER, provide: EXTENSIONS_IDENTIFIER,
useValue: eIdentityComponents.Roles, useValue: eIdentityComponents.Roles,
}, },
{ {
provide: RolesComponent, provide: RolesComponent,
useExisting: MyRolesComponent useExisting: MyRolesComponent,
} },
], ],
}) })
export class MyRolesComponent implements OnInit { export class MyRolesComponent implements OnInit {
public readonly list = inject<ListService<PagedAndSortedResultRequestDto>>(ListService);
protected readonly confirmationService = inject(ConfirmationService);
protected readonly injector = inject(Injector);
protected readonly service = inject(IdentityRoleService);
data: PagedResultDto<IdentityRoleDto> = { items: [], totalCount: 0 }; data: PagedResultDto<IdentityRoleDto> = { items: [], totalCount: 0 };
form: FormGroup; form: FormGroup;
@ -63,17 +69,10 @@ export class MyRolesComponent implements OnInit {
permissionManagementKey = ePermissionManagementComponents.PermissionManagement; permissionManagementKey = ePermissionManagementComponents.PermissionManagement;
onVisiblePermissionChange = event => { onVisiblePermissionChange = (event) => {
this.visiblePermissions = event; this.visiblePermissions = event;
}; };
constructor(
public readonly list: ListService<PagedAndSortedResultRequestDto>,
protected confirmationService: ConfirmationService,
protected injector: Injector,
protected service: IdentityRoleService,
) {}
ngOnInit() { ngOnInit() {
this.hookToQuery(); this.hookToQuery();
} }
@ -253,13 +252,18 @@ export class MyRolesModule {}
As the last step, it is needs to be replaced the `RolesComponent` with the `MyRolesComponent`. Open the `app.component.ts` and modify its content as shown below: As the last step, it is needs to be replaced the `RolesComponent` with the `MyRolesComponent`. Open the `app.component.ts` and modify its content as shown below:
```js ```js
import { Component, inject } from '@angular/core';
import { ReplaceableComponentsService } from '@abp/ng.core'; import { ReplaceableComponentsService } from '@abp/ng.core';
import { eIdentityComponents } from '@abp/ng.identity'; import { eIdentityComponents } from '@abp/ng.identity';
import { MyRolesComponent } from './my-roles/my-roles.component'; import { MyRolesComponent } from './my-roles/my-roles.component';
@Component(/* component metadata */) @Component({
// component metadata
})
export class AppComponent { export class AppComponent {
constructor(private replaceableComponents: ReplaceableComponentsService) { private replaceableComponents = inject(ReplaceableComponentsService);
constructor() {
this.replaceableComponents.add({ component: MyRolesComponent, key: eIdentityComponents.Roles }); this.replaceableComponents.add({ component: MyRolesComponent, key: eIdentityComponents.Roles });
} }
} }

13
docs/en/framework/ui/angular/http-error-reporter-service.md
View File

@ -7,13 +7,14 @@ See the example below to learn how to report an error:
```ts ```ts
import { HttpErrorReporterService } from '@abp/ng.core'; import { HttpErrorReporterService } from '@abp/ng.core';
import { HttpClient } from '@angular/common/http'; import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core'; import { Injectable, inject } from '@angular/core';
import { of } from 'rxjs'; import { of } from 'rxjs';
import { catchError } from 'rxjs/operators'; import { catchError } from 'rxjs/operators';
@Injectable() @Injectable()
export class SomeService { export class SomeService {
constructor(private http: HttpClient, private httpErrorReporter: HttpErrorReporterService) {} private http = inject(HttpClient);
private httpErrorReporter = inject(HttpErrorReporterService);
getData() { getData() {
return this.http.get('http://example.com/get-data').pipe( return this.http.get('http://example.com/get-data').pipe(
@ -31,17 +32,19 @@ See the following example to learn listening the reported errors:
```ts ```ts
import { HttpErrorReporterService } from '@abp/ng.core'; import { HttpErrorReporterService } from '@abp/ng.core';
import { HttpErrorResponse } from '@angular/common/http'; import { HttpErrorResponse } from '@angular/common/http';
import { Injectable } from '@angular/core'; import { Injectable, inject } from '@angular/core';
@Injectable() @Injectable()
export class MyErrorHandler { export class MyErrorHandler {
constructor(private httpErrorReporter: HttpErrorReporterService) { private httpErrorReporter = inject(HttpErrorReporterService);
constructor() {
this.handleErrors(); this.handleErrors();
} }
handleErrors() { handleErrors() {
this.httpErrorReporter.reporter$.subscribe((err: HttpErrorResponse) => { this.httpErrorReporter.reporter$.subscribe((err: HttpErrorResponse) => {
// handle the errors here // handle the errors here
}); });
} }
} }

58
docs/en/framework/ui/angular/permission-management-component-replacement.md
View File

@ -19,7 +19,7 @@ import {
import { LocaleDirection } from '@abp/ng.theme.shared'; import { LocaleDirection } from '@abp/ng.theme.shared';
import { import {
Component, Component,
EventEmitter, Inject, Input, Optional, Output, TrackByFunction EventEmitter, Inject, inject, Input, Optional, Output, TrackByFunction
} from '@angular/core'; } from '@angular/core';
import { of } from 'rxjs'; import { of } from 'rxjs';
import { finalize, switchMap, tap } from 'rxjs/operators'; import { finalize, switchMap, tap } from 'rxjs/operators';
@ -42,16 +42,18 @@ type PermissionWithStyle = PermissionGrantInfoDto & {
}) })
export class PermissionManagementComponent export class PermissionManagementComponent
implements implements
PermissionManagement.PermissionManagementComponentInputs, PermissionManagement.PermissionManagementComponentInputs,
PermissionManagement.PermissionManagementComponentOutputs { PermissionManagement.PermissionManagementComponentOutputs {
private readonly service = inject(PermissionsService);
private readonly configState = inject(ConfigStateService);
protected _providerName: string; protected _providerName: string;
@Input() @Input()
get providerName(): string { get providerName(): string {
if (this.replaceableData) return this.replaceableData.inputs.providerName; if (this.replaceableData) return this.replaceableData.inputs.providerName;
return this._providerName; return this._providerName;
} }
set providerName(value: string) { set providerName(value: string) {
this._providerName = value; this._providerName = value;
} }
@ -60,10 +62,8 @@ export class PermissionManagementComponent
@Input() @Input()
get providerKey(): string { get providerKey(): string {
if (this.replaceableData) return this.replaceableData.inputs.providerKey; if (this.replaceableData) return this.replaceableData.inputs.providerKey;
return this._providerKey; return this._providerKey;
} }
set providerKey(value: string) { set providerKey(value: string) {
this._providerKey = value; this._providerKey = value;
} }
@ -72,10 +72,8 @@ export class PermissionManagementComponent
@Input() @Input()
get hideBadges(): boolean { get hideBadges(): boolean {
if (this.replaceableData) return this.replaceableData.inputs.hideBadges; if (this.replaceableData) return this.replaceableData.inputs.hideBadges;
return this._hideBadges; return this._hideBadges;
} }
set hideBadges(value: boolean) { set hideBadges(value: boolean) {
this._hideBadges = value; this._hideBadges = value;
} }
@ -85,7 +83,6 @@ export class PermissionManagementComponent
get visible(): boolean { get visible(): boolean {
return this._visible; return this._visible;
} }
set visible(value: boolean) { set visible(value: boolean) {
if (value === this._visible) return; if (value === this._visible) return;
@ -106,15 +103,10 @@ export class PermissionManagementComponent
@Output() readonly visibleChange = new EventEmitter<boolean>(); @Output() readonly visibleChange = new EventEmitter<boolean>();
data: GetPermissionListResultDto = { groups: [], entityDisplayName: null }; data: GetPermissionListResultDto = { groups: [], entityDisplayName: null };
selectedGroup: PermissionGroupDto; selectedGroup: PermissionGroupDto;
permissions: PermissionGrantInfoDto[] = []; permissions: PermissionGrantInfoDto[] = [];
selectThisTab = false; selectThisTab = false;
selectAllTab = false; selectAllTab = false;
modalBusy = false; modalBusy = false;
trackByFn: TrackByFunction<PermissionGroupDto> = (_, item) => item.name; trackByFn: TrackByFunction<PermissionGroupDto> = (_, item) => item.name;
@ -142,7 +134,6 @@ export class PermissionManagementComponent
get isVisible(): boolean { get isVisible(): boolean {
if (!this.replaceableData) return this.visible; if (!this.replaceableData) return this.visible;
return this.replaceableData.inputs.visible; return this.replaceableData.inputs.visible;
} }
@ -152,9 +143,7 @@ export class PermissionManagementComponent
public replaceableData: ReplaceableComponents.ReplaceableTemplateData< public replaceableData: ReplaceableComponents.ReplaceableTemplateData<
PermissionManagement.PermissionManagementComponentInputs, PermissionManagement.PermissionManagementComponentInputs,
PermissionManagement.PermissionManagementComponentOutputs PermissionManagement.PermissionManagementComponentOutputs
>, >
private service: PermissionsService,
private configState: ConfigStateService
) {} ) {}
getChecked(name: string) { getChecked(name: string) {
@ -162,17 +151,11 @@ export class PermissionManagementComponent
} }
isGrantedByOtherProviderName(grantedProviders: ProviderInfoDto[]): boolean { isGrantedByOtherProviderName(grantedProviders: ProviderInfoDto[]): boolean {
if (grantedProviders.length) { return grantedProviders?.some(p => p.providerName !== this.providerName);
return grantedProviders.findIndex(p => p.providerName !== this.providerName) > -1;
}
return false;
} }
onClickCheckbox(clickedPermission: PermissionGrantInfoDto, value) { onClickCheckbox(clickedPermission: PermissionGrantInfoDto, value) {
if ( if (clickedPermission.isGranted && this.isGrantedByOtherProviderName(clickedPermission.grantedProviders))
clickedPermission.isGranted &&
this.isGrantedByOtherProviderName(clickedPermission.grantedProviders)
)
return; return;
setTimeout(() => { setTimeout(() => {
@ -184,7 +167,6 @@ export class PermissionManagementComponent
} else if (clickedPermission.parentName === per.name && !clickedPermission.isGranted) { } else if (clickedPermission.parentName === per.name && !clickedPermission.isGranted) {
return { ...per, isGranted: true }; return { ...per, isGranted: true };
} }
return per; return per;
}); });
@ -255,16 +237,11 @@ export class PermissionManagementComponent
this.setTabCheckboxState(); this.setTabCheckboxState();
} }
submit() { submit() {
const unchangedPermissions = getPermissions(this.data.groups); const unchangedPermissions = getPermissions(this.data.groups);
const changedPermissions: UpdatePermissionDto[] = this.permissions const changedPermissions: UpdatePermissionDto[] = this.permissions
.filter(per => .filter(per =>
unchangedPermissions.find(unchanged => unchanged.name === per.name).isGranted === unchangedPermissions.find(unchanged => unchanged.name === per.name).isGranted !== per.isGranted
per.isGranted
? false
: true,
) )
.map(({ name, isGranted }) => ({ name, isGranted })); .map(({ name, isGranted }) => ({ name, isGranted }));
@ -321,26 +298,23 @@ export class PermissionManagementComponent
this.replaceableData.outputs.visibleChange(visible); this.replaceableData.outputs.visibleChange(visible);
} }
} }
shouldFetchAppConfig() { shouldFetchAppConfig() {
const currentUser = this.configState.getOne('currentUser') as CurrentUserDto; const currentUser = this.configState.getOne('currentUser') as CurrentUserDto;
if (this.providerName === 'R') return currentUser.roles.some(role => role === this.providerKey); if (this.providerName === 'R') return currentUser.roles.some(role => role === this.providerKey);
if (this.providerName === 'U') return currentUser.id === this.providerKey; if (this.providerName === 'U') return currentUser.id === this.providerKey;
return false; return false;
} }
} }
function findMargin(permissions: PermissionGrantInfoDto[], permission: PermissionGrantInfoDto) { function findMargin(permissions: PermissionGrantInfoDto[], permission: PermissionGrantInfoDto): number {
const parentPermission = permissions.find(per => per.name === permission.parentName); const parentPermission = permissions.find(per => per.name === permission.parentName);
if (parentPermission && parentPermission.parentName) { if (parentPermission && parentPermission.parentName) {
let margin = 20; let margin = 20;
return (margin += findMargin(permissions, parentPermission)); return margin + findMargin(permissions, parentPermission);
} }
return parentPermission ? 20 : 0; return parentPermission ? 20 : 0;
} }
@ -461,12 +435,12 @@ Open `app.component.ts` in `src/app` folder and modify it as shown below:
```js ```js
import { ReplaceableComponentsService } from '@abp/ng.core'; import { ReplaceableComponentsService } from '@abp/ng.core';
import { ePermissionManagementComponents } from '@abp/ng.permission-management'; import { ePermissionManagementComponents } from '@abp/ng.permission-management';
import { Component, OnInit } from '@angular/core'; import { Component, OnInit, inject } from '@angular/core';
import { PermissionManagementComponent } from './permission-management/permission-management.component'; import { PermissionManagementComponent } from './permission-management/permission-management.component';
//... //...
export class AppComponent implements OnInit { export class AppComponent implements OnInit {
constructor(private replaceableComponents: ReplaceableComponentsService) {} // injected ReplaceableComponentsService private readonly replaceableComponents = inject(ReplaceableComponentsService); // injected ReplaceableComponentsService
ngOnInit() { ngOnInit() {
this.replaceableComponents.add({ this.replaceableComponents.add({

4
docs/en/framework/ui/angular/theming.md
View File

@ -224,7 +224,7 @@ All of the options are shown below. You can choose either of them.
````ts ````ts
import { eUserMenuItems } from '@abp/ng.theme.basic'; import { eUserMenuItems } from '@abp/ng.theme.basic';
import { UserMenuService } from '@abp/ng.theme.shared'; import { UserMenuService } from '@abp/ng.theme.shared';
import { Component, inject, Inject } from '@angular/core'; import { Component, inject } from '@angular/core';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
// make sure that you import this component in a NgModule // make sure that you import this component in a NgModule
@ -239,7 +239,7 @@ import { Router } from '@angular/router';
}) })
export class UserMenuItemComponent { export class UserMenuItemComponent {
// you can inject the data through `INJECTOR_PIPE_DATA_TOKEN` token // you can inject the data through `INJECTOR_PIPE_DATA_TOKEN` token
constructor(@Inject(INJECTOR_PIPE_DATA_TOKEN) public data: UserMenu) {} public data = inject<UserMenu>(INJECTOR_PIPE_DATA_TOKEN);
} }
@Component({/* component metadata */}) @Component({/* component metadata */})

18
docs/en/modules/setting-management.md
View File

@ -289,16 +289,18 @@ yarn ng generate component my-settings
Open the `app.component.ts` and modify the file as shown below: Open the `app.component.ts` and modify the file as shown below:
```js ```js
import { Component } from '@angular/core'; import { Component, inject } from '@angular/core';
import { SettingTabsService } from '@abp/ng.setting-management/config'; // imported SettingTabsService import { SettingTabsService } from '@abp/ng.setting-management/config';
import { MySettingsComponent } from './my-settings/my-settings.component'; // imported MySettingsComponent import { MySettingsComponent } from './my-settings/my-settings.component';
@Component(/* component metadata */) @Component({
// component metadata
})
export class AppComponent { export class AppComponent {
constructor(private settingTabs: SettingTabsService) // injected MySettingsComponent private readonly settingTabs = inject(SettingTabsService);
{
// added below constructor() {
settingTabs.add([ this.settingTabs.add([
{ {
name: 'MySettings', name: 'MySettings',
order: 1, order: 1,

Write Preview
Loading…
Cancel
Save