问题[angular](coding)

我有一个具有多个扩展的基类，如下所示：

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;
}

每个扩展（例如 OnePagerWidgetTypePicture）都有自己的组件。在模板中，我循环遍历 ProjectOnePagerDTO 的 Widgets 属性并将每个小部件传递给其组件。OnePagerWidgetTypePicture 的组件如下所示

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

现在我收到以下错误：Property 'ProjectLogo' is missing in type 'IOnePagerWidget' but required in type 'OnePagerWidgetTypePicture'。

我错过了什么？我是否必须更改 @Input 类型并将其直接转换为组件内部的类型？

我很难理解茉莉花间谍在构造函数中注入依赖项的服务

我有一个带有构造函数的帐户服务

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

在帐户服务中，我有一个使用 authorityService（在构造函数中设置）的方法，在返回值之前检查权限

  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;
  }

我想要做的是为 getAccount 方法提供单元测试。我想要确保 authorityService.hasAuthority(Authority.PERM_ACCOUNT_READ) 何时返回 true 或 false

在我的测试中，我在 .spec.ts 文件中设置了以下内容

存根 authService

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

然后在我的描述块中我有以下内容

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);
  }));

在我的第一个测试中，我想确保如果权限为 false，则 getAccount() 中的 Account 对象为 null

  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")
    );
  });

此测试通过

但在另一种情况下，我想测试权限设置的时间并验证帐户不为空，我有以下内容

  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")
    );
  });

期望expect(authorityServiceDependency.hasAuthority).toHaveBeenCalledWith(Authority.PERM_ACCOUNT_READ);

失败并显示消息

预期间谍 hasAuthority 已被调用：['PERM_ACCOUNT_READ'] 但从未被调用。在 UserContext。（src/app/core/services/account/account.service.spec.ts:86:53）在 Generator.next（）在 asyncGeneratorStep（node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:3:1）在 _next（node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:17:1）

我知道我做错了什么，但我无论如何都无法让它按我想要的方式工作。不清楚在我的测试中设置模拟类是否是正确的方法。看起来很笨拙，但我在互联网上的某个地方读到过这种方法，它似乎很有意义，但我有点不适应这里的情况，并希望得到任何见解/指导

我有以下代码，我希望首先初始化存储，然后初始化会话，然后您进入应用程序。

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),
      ),
    )
  }
}

我曾经像下面这样实现它

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

但是使用最新的provideAppInitializer，我找不到为方法提供 deps 的方法。

看起来 Angular 团队已经改变了实现它的方式，如下useFactory所示：

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

但我不知道该把我的依赖关系交给谁。

有人知道吗？

我有一个旧的@Input，它从父组件传递一个回调函数，我想将其转换为输入信号。

使用旧的装饰器输入，我只需执行 即可调用传入的函数this.callback()。这当然不适用于输入信号，因为相同的语句仅返回输入的值……在本例中是一个函数，所以我认为this.callback()()可以获取输入（函数）的值，然后实际调用该函数，但似乎并非如此。

如果我将一个函数传递给输入信号（当前定义为callback = input.required<() => void>()），有没有办法实际调用该函数，或者我现在只需要坚持使用旧的装饰器输入？

我正在使用 Angular 信号和 NGXS 状态管理，并且正在尝试创建一个计算信号，该信号在我的输入信号改变时和存储更新时都会更新。

我有一个懒惰的选择器：

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

在我的组件中，我有一个针对 searchId 的输入信号：

searchId = input.required<number>();

我想创建一个计算信号，既能对 searchId 更改做出反应，又能对存储更新做出反应。我最初尝试这样做：

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

但是，这会导致嵌套信号（Signal<Signal<Search>>）。编写对我的 searchId 输入信号和 NGXS 的状态更新做出反应的计算信号的最佳方法是什么？

Angular 中是否有内置方法可以将模型中的数字类型用作 HTML 中的十六进制值进行显示和编辑？我的模型中有这种类型：

bitmask: number = 0;

现在应该在前端显示为十六进制值。

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

任何提示或帮助都将不胜感激。我已经尝试使用模型中的属性，如下所示：

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

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

但似乎我无法像使用位掩码字段那样在前端的绑定中使用它。

我正在为我的同事准备一个关于 Angular 状态管理主题的演示文稿。演讲的重点是创建“哑”组件，这些组件接受来自父组件的输入，在 UI 中呈现这些数据并在输出中发出变化。重要的是它们不存储自己的任何状态（computed在 Angular v17+ 中只存储计算属性和信号）。这有助于我们的团队创建没有变化检测问题的组件，父组件和子组件之间的状态不会不一致，并且尊重单向数据流。

我将向其中一支团队介绍如何使用 Angular Forms，这意味着他们的组件实现了ControlValueAccessor，也就是说他们也可以通过writeValue方法来接受值。这意味着他们的组件确实具有内部状态，而且由于他们也可以从@Inputs 接受值，因此可能会出现奇怪的错误，尤其是在将它们与不使用 Angular Forms 的代码库集成时。

官方对这两种方法为何如此不同有何解释？

组件从@Inputs 获取值的方法如何与从 获取值的方法统一writeValue？ 是否有可能创建一个与 Angular Forms 兼容且不包含任何自身状态的组件？

有没有办法实现 Angular Forms，其中组件通过@Inputs（或inputAngular 17+ 中的信号）接收它们的值？

ChatGPT 建议如下：

  @Input() value: any;

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

但是从我对 Angular 的了解来看，写入@Input是一个非常糟糕的主意，甚至在 Angular 17+ 中使用信号也不可能实现。

我正在使用 RxJS 和 Angular 19.1，遇到了一个非常奇怪的行为：

间隔.组件.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();
    });
  }
}

间隔.组件.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. -->

一切都非常简单。默认没有 changeDetection - JIC。

我知道我可以用信号试试，实际上我已经试过了。这样就detectChanges不需要了，但中的行为.html是一样的。上的值@for会同时显示出来。

对于为什么会发生这种情况您有什么想法吗？

我有一个包含许多独立组件的 Angular 库。其中一些组件依赖于第三方库（angular2-draggable、@fortawesome/angular-fontawesome 等）。我的目标是可以在应用程序中使用此库，但只为应用程序中实际使用的组件添加依赖项。

例如，该库包含以下组件：

• 福
• 栏（取决于 angular2-draggable）

在消费应用程序中，如果我仅使用组件 Foo，则我不想依赖 angular2-draggable。我该怎么做？

似乎正确的方法是添加 angular2-draggable 作为可选的对等依赖项，如下所示：

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

该库将顺利构建和发布。一切都按预期安装在使用应用程序中。但在启动应用程序时，我收到以下错误： Error: Module not found: Error: Can't resolve 'angular2-draggable' 即使使用应用程序中根本没有使用 Bar，情况也是如此。我如何确保只需要所需的依赖项？

为什么它看起来像在我的应用程序中，我无法管理如何更改填充/边距，有时第一个日期有适当的位置，有时第二个。

占位符看起来也不像来自文档，从“输入日期范围”到“开始日期 - 结束日期”的动画与文档中的不一样：

这是我的代码（我从文档中复制了它）：

<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>

编辑。当您单击日期选择器并按“<-”和“->”键时，日期将调整到正确的位置。