angular 相关问题

如何在 Angular 中动态地将类添加到组件的根元素而不破坏封装？

我不知道如何向我的组件添加动态类属性，但在模板 html (component.html) 中。 我找到的唯一解决方案是修改它......

DevExtreme 嵌套表不会在排序父表时扩展

我在 Angular 应用程序中使用 DevExtreme 嵌套数据网格 (dx-data-grid) 来显示分层数据。我的数据结构由一个父表组成，父表中的每一行都可以...

Angular：基于index.ts导入会导致：“ERROR TypeError：无法读取未定义的属性（读取'ɵcmp'）”

在我的 Angular 项目中，我有多个共享组件。我的相关文件夹结构是： 源代码 应用程序 共享 成分 _ ... 确认（带有

在 Angular 中，当我想动态创建组件时，如何获取所在模块的 ngModuleRef？

考虑这样创建的模块： @NgModule({ 导入：[浏览器模块]， 提供商：[ AdService ]， 声明：[ 应用程序组件， 广告横幅组件， HeroJobAdComponent，

Angular/Typescript 装饰器在 Observable Emit 上执行方法

我有一个身份验证服务，如下所示： 导出类 AuthService { 私人登录$$：BehaviorSubject = newBehaviourSubject(null); 私人注销$$：BehaviorSubject<

如何在 Angular 7 中将字符串 Base64 转换为 pdf

我已成功使用 REST 将附件从 Java 后端发送到 Angular。 我有结果示例： JVBERi0xLjQKJeLjz9MKMyAwIG9iago8PC9Db2xvclNwYWNlL0 角度： 获取图像（）{ 这个。

角度响应轮播安装问题 - IvyCarouselModule

我正在尝试安装 npm i angular-responsive-carousel，但出现以下错误 npm 错误！解析时：[email protected] npm 错误！发现：@angular/[email protected] npm 错误！节点模块/@an...

在数据库中存储文章页面的常用方法是什么？

我是一名网络技术（尤其是 Angular）的学习开发人员，目前正在我们计算机科学俱乐部的网站上工作。 我们计划发布一些文章、备忘单等，并且我们...

Angular - 强制反应式表单在单元测试中有效

我正在使用 Angular v4.4.4。在组件中，单击模板中的按钮后，假设反应式表单有效，则保存表单。类似于（伪代码）： 公共 onSave(): 无效 { ...

如何在发生错误后保持 Rxjs 可观察性（忽略错误）

我将一些值发送到 rxjs 管道，然后进行订阅。如果出现错误，我想忽略它们并继续剩余的输入。 of('foo', 'bar', 'error', 'bazz', 'nar', 'error'...

更改为离线并按刷新 (F5) 时，Angular PWA 不起作用

我正在使用 Angular 来制作 PWA 应用程序。 角度：12 发生的事情是： 我进入我的应用程序（在线模式）-> 网络应用程序可以正常显示 打开开发者控制台并将连接更改为离线

当我部署在服务器中时，Angular Service Worker 离线缓存不起作用

当我使用 Angular/PWA 构建我的 Angular 项目并使用 http-server 在本地服务器上测试它时，它按预期工作。即使离线缓存在本地也能正常工作。 但当我部署完毕后...

CDK 拖放预览位于模式对话框后面

在查看了许多堆栈溢出答案后，我发布了这个问题。我需要在对话框模式上启用拖放功能。我在表行上使用它。我可以拖放...

AADSTS900561：端点仅接受 POST、OPTIONS 请求。在 Angular UI 上收到 GET 请求

在本地运行我的角度代码时出现此错误 我已检查我的注销网址是 https://login.microsoftonline.com/common/oauth2/v2.0/logoutsession/ 并且我的重定向网址是“

如果所选记录位于 Angular 数据表的第二页，我们可以默认导航到该页面吗？

我有一个显示组织列表的角度数据表。每页最多显示 5 个组织。不过默认选择的组织索引是7，也就是说是2号

通知广播

我有一些通知，当它们的 start_date 小于或等于当前时间时应该广播。但是，在某些情况下，用户可能会在正式通知之前看到通知

升级到 Angular 17 bsdatepicker 输入后 [只读属性不起作用

我将我的项目升级到了 Angular 17，当检查只读属性未显示时，已经工作的引导日期选择器就绪属性不起作用。但在 htm 中，它被设置为只读...

Prime ng：以编程方式调整 p-splitter 中存在的 p-accordion 的大小

请参阅下面我的组件代码： 我有一个 p 分配器，它分为 3 个部分。 我在每个部分都有一个 p-手风琴，而它又有一个 p-表。 ... 请参阅下面我的组件代码： 我有一个 p 分离器，它被分成 3 个部分。 我在每个部分都有一个 p-手风琴，而它又具有一个 p-表。 <div class="card w-full"> <p-splitter [panelSizes]="[30, 40, 30]" styleClass="mb-5"> <ng-template pTemplate> <p-accordion [activeIndex]="0" styleClass="h-full"> <p-accordionTab header="Signed PDF Documents"> <div class="flex justify-content-between"> <div> <h6>Proposal PDF Documents</h6> </div> <div><a>Add Attachment(s)</a></div> </div> <ng-template pTemplate> <p-table [value]="documentList" styleClass="p-3 p-datatable-striped"> <ng-template pTemplate="header"> <tr> <th pSortableColumn="name">Attachment Name <p-sortIcon field="name"></p-sortIcon> </th> </tr> </ng-template> <ng-template pTemplate="body" let-doc> <tr> <td><a>{{ doc.name }}</a></td> </tr> </ng-template> </p-table> </ng-template> </p-accordionTab> </p-accordion> </ng-template> <ng-template pTemplate> <p-accordion [activeIndex]="0" > <p-accordionTab header="Papervision Documents"> <div class="flex justify-content-between"> <div> <h6>Scanned Contract Documents</h6> </div> </div> <ng-template pTemplate> <p-table [value]="paperDocumentList" styleClass="p-3 p-datatable-striped"> <ng-template pTemplate="header"> <tr> <th pSortableColumn="number">Customer Number <p-sortIcon field="number"></p-sortIcon> </th> <th pSortableColumn="name">Customer Name <p-sortIcon field="name"></p-sortIcon> </th> <th pSortableColumn="type">Doc Type <p-sortIcon field="type"></p-sortIcon> </th> <th pSortableColumn="docNumber">Doc Number <p-sortIcon field="docNumber"></p-sortIcon> </th> <th pSortableColumn="docDate">Doc Date <p-sortIcon field="docDate"></p-sortIcon> </th> </tr> </ng-template> <ng-template pTemplate="body" let-doc> <tr> <td><a>{{ doc.number }}</a></td> <td>{{ doc.name }}</td> <td>{{ doc.type }}</td> <td>{{ doc.docNumber }}</td> <td>{{ doc.docDate }}</td> </tr> </ng-template> </p-table> </ng-template> </p-accordionTab> </p-accordion> </ng-template> <ng-template pTemplate> <p-accordion [activeIndex]="0" class="w-100"> <p-accordionTab header="Docusign Documents"> <div class="flex justify-content-between"> <div> <h6>Docusign Documents</h6> </div> </div> <ng-template pTemplate> <p-table [value]="docusignDocumentList" styleClass="p-3 p-datatable-striped"> <ng-template pTemplate="header"> <tr> <th pSortableColumn="name">Document Name <p-sortIcon field="name"></p-sortIcon> </th> <th pSortableColumn="number">Doc Id <p-sortIcon field="number"></p-sortIcon> </th> </tr> </ng-template> <ng-template pTemplate="body" let-doc> <tr> <td>{{ doc.name }}</td> <td><a>{{ doc.number }}</a></td> </tr> </ng-template> </p-table> </ng-template> </p-accordionTab> </p-accordion> </ng-template> </p-splitter> </div> 我这里有两个问题需要解决： 如何将所有手风琴的大小设置为相同。请注意，内容是动态的，每个手风琴都根据其内容而增长。我希望所有手风琴的大小相同。 （这3个手风琴的最大尺寸） 怎样才能让分离器不重新调整大小？目前用户可以重新调整分离器的大小。如果我想阻止它，我该如何实现呢？ 感谢您的阅读，如有任何帮助，我们将不胜感激！ 致以最诚挚的问候， 尼丁阿乌拉。 通常组件 CSS 的作用域仅限于组件内部，我们可以使用 ::ng-deep 来覆盖此行为，并且 CSS 在组件外部可见！ 如何将所有手风琴的大小设置为相同。请注意，内容是动态的，每个手风琴都根据其内容而增长。我希望所有手风琴的大小相同。 （这3个手风琴的最大尺寸） 我只是添加下面的 CSS 以确保完整高度传播到手风琴的所有元素，我使用类 custom-accordion 来确保 CSS 仅限于手风琴本身！ HTML ... <div class="card w-full custom-accordion" [ngClass]="{'no-resize': noResize}"> ... CSS ::ng-deep .custom-accordion .p-accordion-content { height: calc(100% - 54px) !important; } ::ng-deep .custom-accordion .p-toggleable-content, ::ng-deep .custom-accordion .p-accordion-tab, ::ng-deep .custom-accordion p-accordiontab, ::ng-deep .custom-accordion .p-accordion { height:100% !important; } 怎样才能让分离器不重新调整大小？目前用户可以重新调整分离器的大小。如果我想阻止它，我该如何实现呢？ 我不知道为什么你需要一个调整大小的元素，当不需要调整大小时，你可以对flexbox做同样的事情，如果你想这样做，你可以引用bootstrap grids中的CSS！ 为了实现你想要的，我们可以使用类 p-splitter-gutter 隐藏调整大小栏，我使用类 no-resize 将其范围限定到手风琴级别。 HTML <button (click)="noResize = !noResize">toggle Resize</button> {{noResize}} <div class="card w-full custom-accordion" [ngClass]="{'no-resize': noResize}"> ... CSS /* disable the resize */ ::ng-deep .no-resize .p-splitter-gutter { display: none !important; } 完整代码 TS import { Component } from '@angular/core'; import { ImportsModule } from './imports'; @Component({ selector: 'splitter-horizontal-demo', templateUrl: './splitter-horizontal-demo.html', standalone: true, imports: [ImportsModule], styles: [ ` ::ng-deep .custom-accordion .p-accordion-content { height: calc(100% - 54px) !important; } ::ng-deep .custom-accordion .p-toggleable-content, ::ng-deep .custom-accordion .p-accordion-tab, ::ng-deep .custom-accordion p-accordiontab, ::ng-deep .custom-accordion .p-accordion { height:100% !important; } /* disable the resize */ ::ng-deep .no-resize .p-splitter-gutter { display: none !important; } `, ], }) export class SplitterHorizontalDemo { noResize = false; documentList = [ { name: 'test' }, { name: 'test1' }, { name: 'test2' }, { name: 'test3' }, { name: 'test4' }, { name: 'test5' }, { name: 'test6' }, ]; paperDocumentList = [ { number: 'test', name: 'test', type: 'test', docNumber: 'test', docDate: 'test', }, { number: 'test', name: 'test', type: 'test', docNumber: 'test', docDate: 'test', }, { number: 'test', name: 'test', type: 'test', docNumber: 'test', docDate: 'test', }, { number: 'test', name: 'test', type: 'test', docNumber: 'test', docDate: 'test', }, ]; docusignDocumentList = [ { name: 'test', number: 'test', }, ]; noAction(event: any) { event.preventDefault(); return false; } } HTML <button (click)="noResize = !noResize">toggle Resize</button> {{noResize}} <div class="card w-full custom-accordion" [ngClass]="{'no-resize': noResize}"> <p-splitter [panelSizes]="[30, 40, 30]" styleClass="mb-5" (onResizeEnd)="noAction($event)" (onResizeStart)="noAction($event)" > <ng-template pTemplate> <p-accordion [activeIndex]="0" styleClass="h-full"> <p-accordionTab header="Signed PDF Documents"> <div class="flex justify-content-between"> <div> <h6>Proposal PDF Documents</h6> </div> <div><a>Add Attachment(s)</a></div> </div> <ng-template pTemplate> <p-table [value]="documentList" styleClass="p-3 p-datatable-striped" > <ng-template pTemplate="header"> <tr> <th pSortableColumn="name"> Attachment Name <p-sortIcon field="name"></p-sortIcon> </th> </tr> </ng-template> <ng-template pTemplate="body" let-doc> <tr> <td><a>{{ doc.name }}</a></td> </tr> </ng-template> </p-table> </ng-template> </p-accordionTab> </p-accordion> </ng-template> <ng-template pTemplate> <p-accordion [activeIndex]="0"> <p-accordionTab header="Papervision Documents"> <div class="flex justify-content-between"> <div> <h6>Scanned Contract Documents</h6> </div> </div> <ng-template pTemplate> <p-table [value]="paperDocumentList" styleClass="p-3 p-datatable-striped" > <ng-template pTemplate="header"> <tr> <th pSortableColumn="number"> Customer Number <p-sortIcon field="number"></p-sortIcon> </th> <th pSortableColumn="name"> Customer Name <p-sortIcon field="name"></p-sortIcon> </th> <th pSortableColumn="type"> Doc Type <p-sortIcon field="type"></p-sortIcon> </th> <th pSortableColumn="docNumber"> Doc Number <p-sortIcon field="docNumber"></p-sortIcon> </th> <th pSortableColumn="docDate"> Doc Date <p-sortIcon field="docDate"></p-sortIcon> </th> </tr> </ng-template> <ng-template pTemplate="body" let-doc> <tr> <td><a>{{ doc.number }}</a></td> <td>{{ doc.name }}</td> <td>{{ doc.type }}</td> <td>{{ doc.docNumber }}</td> <td>{{ doc.docDate }}</td> </tr> </ng-template> </p-table> </ng-template> </p-accordionTab> </p-accordion> </ng-template> <ng-template pTemplate> <p-accordion [activeIndex]="0" class="w-100"> <p-accordionTab header="Docusign Documents"> <div class="flex justify-content-between"> <div> <h6>Docusign Documents</h6> </div> </div> <ng-template pTemplate> <p-table [value]="docusignDocumentList" styleClass="p-3 p-datatable-striped" > <ng-template pTemplate="header"> <tr> <th pSortableColumn="name"> Document Name <p-sortIcon field="name"></p-sortIcon> </th> <th pSortableColumn="number"> Doc Id <p-sortIcon field="number"></p-sortIcon> </th> </tr> </ng-template> <ng-template pTemplate="body" let-doc> <tr> <td>{{ doc.name }}</td> <td><a>{{ doc.number }}</a></td> </tr> </ng-template> </p-table> </ng-template> </p-accordionTab> </p-accordion> </ng-template> </p-splitter> </div> Stackblitz 演示

如果输入带有 observable，则检测 ngOnChanges 中 SimpleChanges 的变化

在 Angular 中，我通常使用 ngOnChanges 来检测父组件发生了什么变化。 但现在，当声明如下时我感到困惑： @Input() 数据：Observable； 而在 ngOnChan...

使用 ScrollStrategy 声明性创建 Overlay

TL，博士；以声明方式创建 CdkConnectedOverlay 时如何使用滚动策略？ 细节; CdkConnectedOverlay 是一个促进以声明方式创建 Overlay 的指令。 它提供了