angular 相关问题

Kendo Splitter 在折叠动态面板上无法与角度配合良好

我正在使用带有角度的kendo-ui 来制作四个水平面板。 当最后一个面板被切换时，它会打开，并且在调整其大小后，如果我通过切换关闭它，则先前由最后一个面板占用的空间...

国际象棋游戏架构

我计划使用Angular、.NET和SignalR来开发国际象棋游戏以进行实时通信。我的游戏需要具备以下功能：多人游戏、分析模式、在同一浏览器中与朋友一起玩......

在WKT中绘制多边形可以，但GML格式不行

使用 WKT 绘制简单的多边形在 Angular 18、Openlayers 10 中效果很好。无论我尝试什么，我都无法使用 GML 绘制任何内容。 这是有效的： 项目4.defs( 'EPSG：28992'， '+proj=sterea +la...

如果从 Angular 的 mat-datepicker 功能的日历中选择开始日期，如何动态设置月结束日期？

例如。如果从日历中选择的开始日期为“15/06/2000”，并且如果未从日历中选择结束日期，则结束日期将自动设置为“30/06/2000”。结束日期也可以是...

火狐浏览器无法下载大文件

我有一个 Angular 应用程序，用户可以在其中下载他们上传的一些文档（.jpg、.mp4 和 .pdf）。基本上，文件的下载是这样进行的：调用一个服务并返回一些

使用“嵌入客户方法”将 PowerBI 报告集成到使用 OKTA 进行身份验证的角度应用程序

在我们的一个项目中，我们需要将 Power BI 报告嵌入到面向客户端的应用程序中，其中（对应用程序的）身份验证由 Okta 完成。该应用程序是使用 Angular 开发的，并托管...

Angular / Openlayers：在 WKT 中绘制多边形可以，但 GML 格式不行

使用 WKT 绘制简单的多边形在 Angular 18、Openlayers 10 中效果很好。无论我尝试什么，我都无法使用 GML 绘制任何内容。 这是有效的： 项目4.defs( 'EPSG：28992'， '+proj=sterea +la...

NullInjectorError：R3InjectorError

我正在一个个人项目中使用Angular，但我总是收到以下错误： NullInjectorError：R3InjectorError（环境注入器）[_HttpClient->_HttpClient]：NullInjector...

在 Angular 19 中使用 URL 参数填写表单

我有一个表单，在这里研究发现了一种方法来检查表单是否有效，并在提交时将数据放入 URL 中。但是，如果您打开另一个带有参数的页面，我...

Angular 12 在网页版上刷新页面后显示空白页面

在我的 Angular 12 Capacitor 3 项目中，我正在使用路线。除了 root 的 app-routing.module.ts 之外，我还有子选项 tab-guest-routing.module.ts 。 问题是当我刷新 http://loc 页面时...

在 Angular 中，即使投影内容未渲染到 DOM，也会对其进行评估吗？

我在 Stackblitz 中构建了许多场景，您可以在这里查看：https://stackblitz.com/edit/angular-zdyy8v 我们特别要解决的问题是场景 B，我们有 co...

ng-选择显示[对象，对象]

我有一个对象数组，其中包含一个带有对象的元素，我希望使用 ng-select 在可选下拉列表中显示该对象的名称。我可以按预期控制台记录所有内容...

peerConnection.onicecandidate 回调未被调用（webRTC、Angular）

我是一个初学者，试图将 webRTC 视频通话应用程序作为一个项目制作（我设法让它与 websockets 一起工作，但在慢速互联网上会冻结）。我使用 Angular 来实现 FE，使用 Go 来实现 BE。我有一个...

Angular 为组件 GET 疯狂

任何人都可以解释为什么 Angular 正在执行所有这些 GET，100 次，每个组件似乎都是一次获取（我们有 800 多个）。我是更新到v19后才注意到的。 有没有办法说不要这样做...

Angular 2：检查单击元素时是否按下了 Shift 键

在 Angular 2 应用程序中，我希望单击事件在按住 Shift 键时触发不同的操作。如何实现这一目标？ html如下： 在 Angular 2 应用程序中，我希望当 按住 Shift 键时，单击事件能够触发不同的内容。如何实现这一目标？ html如下： <div class="item" *ngFor="#obj of available" (click)="toggleSelected(obj)"></div> 我想做这样的事情： toggleSelected(obj) { if(shift is pressed) { do this } else { do that } } 那么我如何检测是否按下了shift键？谢谢！ 在 (click) 绑定中，将 $event 对象传递给 toggleSelected 方法： <div class="item" *ngFor="#obj of available" (click)="toggleSelected(obj, $event)"></div> 在toggleSelected方法中，检查事件的shiftKey属性是否为true： toggleSelected(obj, event) { if (event.shiftKey) { // do this } else { // do that } } 您的问题可能涉及到表格记录的多选选项。 在这种情况下，您可以将选定的对象存储在一个集合中。 public selectedRowSet: Set<MyObject> = new Set(); 每次选择一条记录时，您可以使用以下方法将它们添加到集合中。 public setSelectedRow(obj: MyObject, event: MouseEvent) { if(!event.shiftKey) { selectedRowSet.clear(); } selectedRowSet.add(obj); } 那么您可能想添加条件格式。 public isRowSelected(obj: MyObject): boolean { return selectedRowSet.has(obj); } 在您看来使用： <tr *ngFor="let obj of myObjectCollection" [class.someCssClass]="isRowSelected(obj)" (click)="setSelectedRow(obj, $event);"> ... </tr> 评论 以下是一些可能有用的额外调整： 您可以选择使用 Shift 或 Ctrl 或 ⌘（适用于苹果） 按下此键也可以取消选择记录。 我希望这对某人有用。 public setSelectedRow(bo: Bo, event: MouseEvent) { // support shift, control and the command key. const add = event.shiftKey || event.ctrlKey || event.metaKey; if (!add) { this.selectedRowSet.clear(); this.selectedRowSet.add(bo); return; } // toggle selected record if (this.selectedRowSet.has(bo)) { this.selectedRowSet.delete(bo); } else { this.selectedRowSet.add(bo); } } 实际答案是 keyboard 事件内置了这个。 <input (keydown)="onKey($event)"` ... 例如，在某个字段内聚焦，请按住 Shift 键，然后再按住另一个键。 键盘事件包含 shiftKey: boolean 致@Michael Liu， 在我的试用中，我发现 当我使用以下代码按下 shift 键时，未检测到 shift 键。 import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <input type="text" (keyup)="updateField($event)" /> `, }) export class AppComponent { title = 'app-project'; updateField(event: KeyboardEvent): void { // if (event.altKey && event.key === 'ShiftLeft') { if (event.shiftKey) { console.group('updateField in AppComponent class when the user pressed alt and left shift key at same time in the text field.'); console.log('The user pressed alt and left shift key at same time in the text field.'); console.groupEnd(); } } } 使用keypress <div class="item" *ngFor="#obj of available" (keypress)="eventHandler($event)"></div> eventHandler(event) { console.log(event, event.keyCode, event.keyIdentifier); }

为什么在 Angular 中按 alt 和 left shift 时 `(keydown.code.alt.leftshift)` 不匹配？但是 `(keyup.shift.enter)` 当 shift 和 Enter 时匹配

问题 抽象的 正如标题所说。 细节 我遵循了 Angular 教程——添加事件侦听器#使用键修饰符。 我采用第三个代码片段 问题 摘要 正如标题所说。 详情 我遵循了 Angular 教程 -- Adding event listeners#Using key modifiers。 我采用第三个代码片段 <!-- Matches shift and enter --> <input type="text" (keyup.shift.enter)="updateField($event)" /> 例如名为 Using key modifiers ex3/app-project 的示例项目 在这个示例项目中，它按我的预期工作。 我将 template 字段设置为以下代码片段（这意味着如果同时按下 upadateField+shift 键，它将调用 enter 回调函数。 <!-- Matches shift and enter --> <input type="text" (keyup.shift.enter)="updateField($event)" /> 并且upadateField回调函数定义如下。 updateField(event: Event): void { console.group('updateField in AppComponent class'); console.log('The user pressed shift and enter at same time in the text field.'); console.groupEnd(); } 本示例项目中app.component.ts中的完整代码如下： import { Component } from '@angular/core'; @Component({ selector: 'app-root', template:` <!-- Matches shift and enter --> <input type="text" (keyup.shift.enter)="updateField($event)" /> ` }) export class AppComponent { title = 'app-project'; updateField(event: Event): void { console.group('updateField in AppComponent class'); console.log('The user pressed shift and enter at same time in the text field.'); console.groupEnd(); } } 层次结构 Angular 中Accessing the event argument ex3的演示项目 另一方面，我采用了代码片段 <!-- Matches alt and left shift --> <input type="text" (keydown.code.alt.leftshift)="updateField($event)" /> 例如名为 Using key modifiers ex4/app-project 的示例项目 在这个示例项目中，它没有按我的预期工作。 我将 template 字段设置为以下代码片段（这意味着如果同时按下 upadateField+ 左 alt 键，它将调用 shift 回调函数。 <!-- Matches shift and enter --> <input type="text" (keyup.shift.enter)="updateField($event)" /> 并且upadateField回调函数定义如下。 updateField(event: Event): void { console.group('updateField in AppComponent class'); console.log('The user pressed enter in the text field.'); console.groupEnd(); } 本示例项目中app.component.ts中的完整代码如下： import { Component } from '@angular/core'; @Component({ selector: 'app-root', template:` <!-- Matches alt and left shift --> <input type="text" (keydown.code.alt.leftshift)="updateField($event)" /> `, }) export class AppComponent { title = 'app-project'; updateField(event: Event): void { console.group('updateField in AppComponent class'); console.log('The user pressed enter in the text field.'); console.groupEnd(); } } 层次结构 Angular 中的 Accessing the event argument ex4 演示项目（有问题） 为什么？ 欣赏 任何有关此问题的回复和提示将不胜感激。 其他信息 框架 带有 SaaS 选项的 Angular。 IDE VSC 完整代码 请参阅上面的详细信息部分。 演示 请参阅上面的详细信息部分。 我尝试了什么？ 按照 Angular 教程上的说明进行操作 -- Adding event listeners#Using key modifiers 附注 我修复了的代码 updateField(event: KeyboardEvent) 到 updateField(event: Event) 修复构建服务器时的其他错误。 我在期待什么？ 我期待的是，在Using key modifiers ex4/app-project中，它可以正常工作（这里，它是在网页开发工具的控制台上输出The user pressed enter in the text field.，如果我同时按下alt+左shift键（我输出消息的拼写错误，但是，这并不重要。）） 第1次更新 我尝试在名为 Using key modifiers ex5/app-project 的示例项目中用另一种方式重写代码 这是我的完整代码app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <input type="text" (keyup)="updateField($event)" /> `, }) export class AppComponent { title = 'app-project'; updateField(event: KeyboardEvent): void { if (event.altKey && event.key === 'ShiftLeft') { console.group('updateField in AppComponent class when the user pressed alt and left shift key at same time in the text field.'); console.log('The user pressed alt and left shift key at same time in the text field.'); console.groupEnd(); } } } Angular 中的 Accessing the event argument ex5 演示项目（有问题） 它没有按我的预期工作。我预计网页开发工具的控制台上会输出 The user pressed alt and left shift key at same time in the text field.，如果我同时按下 alt + 左 shift 键。 第二次更新 抱歉，我忘了说左shift的按键代码值为ShiftKey，根据键盘事件代码值（MDN）第Code values on Windows部分下的表 代码应为以下链接中提到的密钥代码： 键盘事件的代码值 但是从反复试验中我意识到，角度的文档与行为不匹配。这可能是一个错误，你应该在 Angular github 上提出，如果你想实现这个功能，不要查看 code 的 KeyboardEvent 属性，而是使用 key 属性，所以下面的应该可以工作。 <input type="text" (keydown.shift.alt.p)="updateField($event)" /> Stackblitz 演示

在 Angular 2 中测试 ngOnChanges 生命周期钩子

鉴于以下代码，我尝试测试 Angular2 的 ngOnChanges 生命周期钩子： 进口 { 它， 注入， f 描述， 在每个提供商之前， 来自 '@angular/core/testing'; 导入{

无需分叉即可自定义第三方指令的实现

在我们的 Angular 项目中，我们使用 @ngneat/error-tailor 来显示表单错误： 我们有兴趣在触摸控件时显示错误消息，这是本 g 中请求的功能...

如何直接从 Github 到另一个 Angular 项目使用 Angular 库，而无需将 Angular 库发布到 NPM

TL;DR - 我正在寻找一种不需要发布到 NPM 或使用 NPM 符号链接的解决方案 我在 Github 中创建了两个演示存储库，一个用于 Angular 库，另一个用于 Angular 应用程序

如何从 Angular 组件中删除 index.html 中的脚本标签

上面是我的示例脚本标签...