Perguntas[angular](coding)

Tenho uma classe base com várias extensões parecidas com esta:

export interface ProjectOnePagerDTO {
  Widgets: IOnePagerWidget[];
  Id: string;
}

export interface IOnePagerWidget extends GridsterItem {
  Type: OnePagerWidgetType;
}

export interface OnePagerWidgetTypePicture extends IOnePagerWidget {
  ProjectLogo: string;
}

export interface OnePagerWidgetTypeProjectDescription extends IOnePagerWidget {
  Text: string;
}

Cada extensão, por exemplo, OnePagerWidgetTypePicture, tem seu próprio componente. No modelo, eu faço um loop pela propriedade Widgets do ProjectOnePagerDTO e passo cada widget para seu componente. O componente para OnePagerWidgetTypePicture se parece com isso

export class OpwProjectPictureComponent {
  @Input() widget: OnePagerWidgetTypePicture;
}

Agora estou recebendo o seguinte erro: Property 'ProjectLogo' is missing in type 'IOnePagerWidget' but required in type 'OnePagerWidgetTypePicture'.

O que estou esquecendo? Tenho que mudar o tipo @Input e fazer cast dentro do componente?

Estou com dificuldade em entender o Jasmine Spies para serviços com dependências injetadas no construtor

Tenho um serviço de conta com o Constructor

constructor(private readonly api: ApiService,private readonly authorityService: AuthorityService) {}

No serviço Conta, tenho um método que usa o authorityService (definido no construtor) para verificar uma permissão antes de retornar um valor

  public async getAccount(): Promise<Account | null> {
    if (this.authorityService.hasAuthority(Authority.PERM_ACCOUNT_READ)) {
      this.account = await this.api.get<Account>('/admin/rest/account');
      return this.account;
    }
    return null;
  }

O que estou tentando fazer é fornecer testes unitários para o método getAccount. O que eu quero é garantir que quando authorityService.hasAuthority(Authority.PERM_ACCOUNT_READ) retorne true ou false

No meu teste, configurei o seguinte no meu arquivo .spec.ts

stub do authService

class  authorityServiceStub{
  hasAuthority(str: string): boolean {
    return false;
  }
}

então no meu bloco describe eu tenho o seguinte

fdescribe('AccountService', () => {
  let service: AccountService;
  let httpTestingController:HttpTestingController
  let authorityServiceDependency:AuthorityService;

  /**
   * Sets up the testing module before each test case.
   */
   beforeEach(waitForAsync(() => {

    TestBed.configureTestingModule({
      imports: [],
      providers: [provideHttpClient(),
        provideHttpClientTesting(),
        AccountService,{
          provide: AuthorityService,
          useClass: authorityServiceStub
        }
        ],
    })

    service = TestBed.inject(AccountService);
    authorityServiceDependency = TestBed.inject(AuthorityService);
    httpTestingController = TestBed.inject(HttpTestingController);
  }));

no meu primeiro teste onde quero garantir se a permissão é falsa, meu objeto Account de getAccount() em nulo

  it('should return null if not permissions and not forced', async() => {
    spyOn(authorityServiceDependency, 'hasAuthority').withArgs(Authority.PERM_ACCOUNT_READ).and.returnValue(false);
    const account = await service.getAccount();
    expect(account).toBeNull();
    expect(authorityServiceDependency.hasAuthority).toHaveBeenCalledWith(Authority.PERM_ACCOUNT_READ);
    const req = httpTestingController.match((request) =>
      request.url.includes("/admin/rest/account")
    );
  });

Este teste passa

mas no outro caso onde eu quero testar quando a permissão está definida e validar se a conta não é nula eu tenho o seguinte

  it('should return the account if the permissions are set', async() => {
    const accountData = {firstName: 'Test',lastName:"tester"} as Account;
    spyOn(authorityServiceDependency, 'hasAuthority').withArgs(Authority.PERM_ACCOUNT_READ).and.returnValue(true);
    spyOn(service, 'getAccount').and.returnValue(Promise.resolve(accountData));
    service.getAccount().then((account) => {
       expect(account).not.toBeNull();
       expect(account?.firstName).toEqual("Test");
       expect(account?.lastName).toEqual("tester");
       expect(service.getAccount).toHaveBeenCalled();

     });
    expect(authorityServiceDependency.hasAuthority).toHaveBeenCalledWith(Authority.PERM_ACCOUNT_READ);
    const req = httpTestingController.match((request) =>
      request.url.includes("/admin/rest/account")
    );
  });

a expectativaexpect(authorityServiceDependency.hasAuthority).toHaveBeenCalledWith(Authority.PERM_ACCOUNT_READ);

está falhando com a mensagem

Esperava-se que o spy hasAuthority tivesse sido chamado com: [ 'PERM_ACCOUNT_READ' ], mas ele nunca foi chamado. em UserContext. (src/app/core/services/account/account.service.spec.ts:86:53) em Generator.next () em asyncGeneratorStep (node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:3:1) em _next (node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:17:1)

Eu sei que é algo que estou fazendo incorretamente, mas pela minha vida eu não consigo fazer isso funcionar como eu quero. Não está claro se configurar a classe simulada no meu teste é a abordagem correta... parece desajeitado, mas eu li essa abordagem em algum lugar na internet e parece fazer sentido, mas estou meio fora do meu elemento aqui e apreciaria qualquer insight/orientação

Eu tinha o seguinte código onde eu quero que o armazenamento seja inicializado primeiro, depois a sessão e então você deve entrar no aplicativo.

export function initApp(
  storage: StorageService,
  session: SessionService,
) {
  return async () => {
    await firstValueFrom(
      storage.initialized$.pipe(
        filter((event) => (event ? true : false)),
        take(1),
      ),
    )

    await firstValueFrom(
      session.initialized$.pipe(
        filter((event) => (event ? true : false)),
        take(1),
      ),
    )
  }
}

Eu costumava implementá-lo como segue

{
  provide: APP_INITIALIZER,
  useFactory: initApp,
  deps: [StorageService, SessionService],
  multi: true,
},

Mas com o último provideAppInitializer não consigo encontrar uma maneira de fornecer dependências para meu método.

Parece que a equipe angular mudou a maneira de implementá useFactory-lo da seguinte forma:

provideAppInitializer(() => {
  const initializerFn = ((service: Service) => {
    return () => service.init();
  })(inject(Service));
  return initializerFn();
});

Mas não consigo entender onde colocar minhas dependências.

Alguém tem alguma ideia?

Tenho um antigo @Inputque passa uma função de retorno de chamada do componente pai, que eu gostaria de converter em um sinal de entrada.

Usando a entrada do antigo decorador, posso chamar a função passada simplesmente fazendo this.callback(). Isso, é claro, não funciona com um sinal de entrada porque a mesma declaração simplesmente retorna o valor da entrada... que neste caso é uma função, então eu pensaria que this.callback()()funcionaria para obter o valor da entrada (a função) e então realmente chamar a função, mas parece que não funciona.

Se eu passar uma função para um sinal de entrada (atualmente definido como callback = input.required<() => void>()), há uma maneira de realmente chamar a função ou preciso apenas continuar com a antiga entrada do decorador por enquanto?

Estou trabalhando com sinais angulares e gerenciamento de estado NGXS, e estou tentando criar um sinal computado que seja atualizado quando meu sinal de entrada muda e quando o armazenamento é atualizado.

Eu tenho um seletor preguiçoso:

static searchById = (id: number) => createSelector(
  [ActiveDashboardSelectors.getSlices.searches], 
  searches => searches.find(search => search.id === id)
);

No meu componente, tenho um sinal de entrada para o searchId:

searchId = input.required<number>();

Quero criar um sinal computado que reaja tanto às mudanças de searchId quanto às atualizações de store. Inicialmente, tentei isto:

public search = computed(() => select(ActiveDashboardSelectors.searchById(this.searchId())));

No entanto, isso resulta em um Signal aninhado ( Signal<Signal<Search>>). Qual é a melhor maneira de escrever um sinal computado que reaja tanto ao meu sinal de entrada searchId quanto às atualizações de estado do NGXS?

Existe alguma maneira integrada com Angular para usar um tipo Number no meu modelo como Hex Value no HTML para exibição e edição? Eu tenho esse tipo no meu modelo:

bitmask: number = 0;

Que agora deve ser apresentado como Valor Hexadecimal no frontend.

<td *ngIf="!isEditing">{{parameter.bitmask}}</td>
<td *ngIf="isEditing"><input type="text" [(ngModel)]="parameter.bitmask" maxlength="2" pattern="^(0-9a-fA-F)$" /></td>

Qualquer dica ou ajuda seria apreciada. Eu já tentei com uma propriedade no modelo assim:

get hexBitmask(): string {
    return this.bitmask.toString(16);
}

set hexBitmask(value: string) {
    if (!value.startsWith('0x')) {
        value = "0x".concat(value);
    }       
        
    this.bitmask = Number(value);
}

Mas parece que não posso usar isso na vinculação do meu frontend da mesma forma que fiz com o campo bitmask.

Estou preparando uma apresentação sobre o tópico de gerenciamento de estado do Angular para meus colegas. O foco principal da palestra é criar componentes "burros" que aceitam entradas de componentes pais, renderizam esses dados em uma IU e emitem alterações nas saídas. A parte importante é que eles não armazenam nenhum estado próprio (apenas propriedades computadas e computedsinais no Angular v17+). Isso ajuda nossa equipe a criar componentes que não têm problemas de detecção de alterações, não podem ter inconsistências de estado entre componentes pais e filhos e respeitam o fluxo de dados unidirecional.

Uma das equipes para as quais farei a apresentação está usando Angular Forms, o que significa que seus componentes implementam ControlValueAccessor, o que significa que eles também podem aceitar valores por meio do writeValuemétodo. Isso significa que seus componentes têm um estado interno e, como eles também podem aceitar valores de @Inputs, bugs estranhos podem acontecer, especialmente ao integrá-los com nossa base de código que não usa Angular Forms.

Qual é a explicação oficial de por que essas duas abordagens são tão diferentes?

Como uma abordagem em que um componente obtém valores de @Inputs pode ser unificada com uma abordagem em que obtém valores de writeValue? É possível criar um componente que seja compatível com Angular Forms e não contenha nenhum estado próprio?

Existe uma maneira de implementar Angular Forms onde os componentes recebem seus valores via @Inputs (ou inputsinais no Angular 17+)?

O ChatGPT sugeriu o seguinte:

  @Input() value: any;

  writeValue(value: any): void {
    this.value = value;
  }

Mas, de tudo que sei sobre Angular, escrever para um @Inputé uma péssima ideia e nem é possível com sinais no Angular 17+.

Estou brincando com RxJS e Angular 19.1 e me deparo com um comportamento muito estranho:

intervalo.componente.ts

export class IntervalComponent {
  count: string[] = [];
  
  constructor (private cdr: ChangeDetectorRef) {
    const secondsCounter = interval(1000);
    const subscription = secondsCounter.subscribe (n => {
      this.count = [...this.count, `It's been ${n} seconds since subscribing!`]
      // I cannot understand why I need to trigger a change detection here as I am changing the value by reference.
      // Either way, if I don't any change gets detected and both the `@for` and the `| json` pipe stays empty.
      this.cdr.detectChanges();
      if (n === 10) subscription.unsubscribe();
    });
  }
}

intervalo.componente.html

<h1>Intervals</h1>
<ul>
  @for (c of count; track c) {
    <li>{{ c }}</li>
    <!-- Here it's supposed to add one value per second, but all of them are displayed from the beginning as if they were already loaded. -->
  }
</ul>

{{ count | json}}
<!-- That's why I added this line, to check what was happening. -->
<!-- Here, all the values are displayed as they were supposed to, adding one by one every second. -->

Tudo super direto. No changeDetection é o padrão - JIC.

Eu sei que posso tentar com sinais, na verdade eu tentei. Então o detectChangesnão é necessário, mas o comportamento em .htmlé o mesmo. Os valores em @forsão exibidos todos de uma vez.

Alguma ideia do porquê isso está acontecendo?

Tenho uma biblioteca Angular que contém vários componentes autônomos. Alguns desses componentes são dependentes de bibliotecas de terceiros (angular2-draggable, @fortawesome/angular-fontawesome, etc.). Meu objetivo é que eu possa usar essa biblioteca em um aplicativo, mas apenas adicionar dependências para os componentes que são realmente usados ​​no aplicativo.

Por exemplo, a biblioteca tem componentes de

• Foo
• Barra (depende de angular2-draggable)

No aplicativo de consumo, se eu estiver usando apenas o componente Foo, então não quero ter uma dependência em angular2-draggable. Como posso fazer isso?

Parece que a abordagem correta é adicionar angular2-draggable como uma dependência de peer opcional, como em:

"sideEffects": false,
"peerDependencies": {
  "angular2-draggable": "^16.0.0"
},
"peerDependenciesMeta": {
  "angular2-draggable": {
    "optional": true
  }
}

A biblioteca será compilada e publicada perfeitamente. Tudo é instalado conforme o esperado no aplicativo consumidor. Mas ao iniciar o aplicativo, estou recebendo erros como: Error: Module not found: Error: Can't resolve 'angular2-draggable' Isso é verdade mesmo se Bar não for usado no aplicativo consumidor. Como posso garantir que apenas as dependências necessárias sejam necessárias?

Por que parece que no meu aplicativo não consigo alterar esse preenchimento/margem, às vezes a primeira data tem a posição correta, às vezes a segunda.

além disso, os marcadores de posição não se parecem com os da documentação, a animação de "Digite um intervalo de datas" para "Data de início - Data de término" não é a mesma que a presente na documentação:

Este é meu código (copiei da documentação):

<mat-form-field appearance="fill">
  <mat-label>Enter a date range</mat-label>
  <mat-date-range-input [formGroup]="range" [rangePicker]="picker">
    <input matStartDate formControlName="start" placeholder="Start date">
    <input matEndDate formControlName="end" placeholder="End date">
  </mat-date-range-input>
  <mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint>
  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-date-range-picker #picker></mat-date-range-picker>

  <mat-error *ngIf="range.controls.start.hasError('matStartDateInvalid')">Invalid start date</mat-error>
  <mat-error *ngIf="range.controls.end.hasError('matEndDateInvalid')">Invalid end date</mat-error>
</mat-form-field>

Editar. Ao clicar no seletor de data e pressionar as teclas “<-” e “->”, as datas são ajustadas para a posição correta.