Angular 7 - 在构造函数中正确初始化变量

Question

Angular 的新手，想知道如何正确初始化 service.ts 文件中的变量。 目的是让我的代码干一点。

export class CollectionsService {
  private urlBase: string;
  private token: string;
  constructor(
    private authorized: AuthService,
    private http: Http,
    private httpHelper: HttpHelperService
  ) {
    this.urlBase = `/app/${this.authorized.user.appdomainid}`; 
    this.token = this.authorized.user.token;
    // this.authorized = undefined
  }
  // ...
}

如果我只是将 url 基直接放在一个方法中就可以了：

getCollections(): Observable<any> {
    return this.http
      .get(
        `/app/${this.authorized.ampUser.appdomainid}/collections`,
        this.httpHelper.getRequestOptions(this.authorized.ampUser.token)
      )
      .pipe(map((response) => <any>response.json()))
      .pipe(map((response) => response.Items))
      .pipe(
        catchError((err) => {
          return throwError(err.json());
        })
      );
  }

Answer 1

将基数 URL 和令牌作为实例变量保留在您的服务中并没有错。 在每个方法中重新定义它们似乎效率低下且重复，但如果您想对AuthService中的更改做出反应，这是有意义的。

如果这是问题，您可以考虑改用属性获取器：

@Injectable({
  providedIn: 'root'
})
export class CollectionsService {

  private get urlBase(): string {
    return `/app/${this.authorized.ampUser.appdomainid}`;
  }

  private get token(): string {
    return this.httpHelper.getRequestOptions(this.authorized.ampUser.token);
  }

  constructor(
    private http: HttpClient,
    private authorized: AuthService,
    private httpHelper: HttpHelperService
  ) {}

  getCollections(): Observable<any> {
    return this.http
      .get(
        `${this.urlBase}/collections`,
        this.token
      )
      .pipe(map((response) => <any>response.json()))
      .pipe(map((response) => response.Items))
      .pipe(
        catchError((err) => {
          return throwError(err.json());
        })
      );
  }
}

---

如果您真的想要 DRY，您可以将其设为提供给整个应用程序的InjectionToken 。 任何数量的服务都可以依赖这些令牌，而无需实例化/维护它们自己的实例变量。

您可以通过使用useFactory策略提供令牌来确保您对AuthService中的更改做出反应。

在你的app.module.ts ：

import { AuthService } from 'auth.service.ts';
import { HttpHelperService } from 'http-helper.service.ts';

const BASE_URL = new InjectionToken<string>('BaseUrl');
const API_TOKEN = new InjectionToken<string>('ApiToken');

@NgModule({
  providers: [
    { 
      provide: BASE_URL, 
      useFactory: (authorized: AuthService) => `/app/${authorized.ampUser.appdomainid}`,
      deps: [AuthService] 
    },
    { 
      provide: API_TOKEN,
      useFactory: (authorized: AuthService) => authorized.ampUser.token,
      deps: [AuthService]
    }
  ],
})
export class AppModule {}

然后在您的collections.service.ts中：

import { BASE_URL, API_TOKEN } from 'app.module.ts';

@Injectable({
  providedIn: 'root'
})
export class CollectionsService {

  constructor(
    private http: HttpClient,
    private httpHelper: HttpHelperService,
    @Inject(BASE_URL) private baseUrl: string,
    @Inject(API_TOKEN) private apiToken: string
  ) {}

  getCollections(): Observable<any> {
    return this.http
      .get(
        `${this.baseUrl}/collections`,
        this.httpHelper.getRequestOptions(this.apiToken)
      )
      .pipe(map((response) => <any>response.json()))
      .pipe(map((response) => response.Items))
      .pipe(
        catchError((err) => {
          return throwError(err.json());
        })
      );
  }

  deleteCollection(listId: unknown): Observable<any> {
    const body = { foo: 1, bar: 2 };
    return this.http
      .delete(
        `${this.baseUrl}/collections/${listId}/rows`,
        this.httpHelper.getRequestOptionsWBody(this.apiToken, body)
      )
      .pipe(map((response) => <any>response.json()))
      .pipe(map((response) => response))
      .pipe(
        catchError((err) => {
          return throwError(err.json());
        })
      );
  }
}

---

顺便说一句，如果您使用的是 Angular 14+，则可以使用inject()方法而不是@Inject装饰器稍微简化代码。 这允许您删除构造函数，如果它所做的只是声明依赖项的话。

@Injectable({
  providedIn: 'root'
})
export class CollectionsService {

  private http = inject(HttpClient);
  private httpHelper = inject(HttpHelper);
  private baseUrl = inject(BASE_URL);
  private apiToken = inject(API_TOKEN);

  getCollections(): Observable<any> {
    return this.http
      .get(
        `${this.baseUrl}/collections`,
        this.httpHelper.getRequestOptions(this.apiToken)
      )
      // ...
  }

  deleteCollection(listId: unknown): Observable<any> {
    const body = { foo: 1, bar: 2 };
    return this.http
      .delete(
        `${this.baseUrl}/collections/${listId}/rows`,
        this.httpHelper.getRequestOptionsWBody(this.apiToken, body)
      )
      // ...
  }

我不确定 Angular 团队对useFactory中的inject()的立场是什么。 他们在使用说明中将其作为示例显示。 对于你的情况：

import { AuthService } from 'auth.service.ts';
import { HttpHelperService } from 'http-helper.service.ts';

const BASE_URL = new InjectionToken<string>('BaseUrl');
const API_TOKEN = new InjectionToken<string>('ApiToken');

@NgModule({
  providers: [
    { 
      provide: BASE_URL, 
      useFactory: () => `/app/${inject(AuthService).ampUser.appdomainid}`
    },
    { 
      provide: API_TOKEN,
      useFactory: () => inject(AuthService).ampUser.token
    }
  ],
})
export class AppModule {}

另一方面， useFactory文档仍然在签名中声明依赖关系......