关于Angular的问题(不要与AngularJS混淆),来自Google的Web框架。将此标记用于Angular问题,这些问题并非特定于单个版本。对于较旧的AngularJS(1.x)Web框架,请使用angularjs标记。
我正在努力处理角度版本和包。 我一直在尝试卸载 Angular/cli 但没有成功。这是我的命令 pwsh> npm ls -g --深度=0 C:\Users\synta\AppData\Roaming 下午 +...
TypeScript 使用泛型类型推断出 AbstractControl 的错误类型
我有一个 InnerComponent,它接受 FormArray 作为输入。该组件需要访问数组中控件的类型。因此,我引入了一个类型参数 ControlValue 并声明 i...
使用鼠标单击在基于复选框的树选择中选择节点时,默认行为是将选择传播到树上,以便选择或部分选择祖先,如
mat-table Angular 中的动态 matHeaderRowDef
我即将动态绑定垫表中的组标题行。但 DOM 找不到 headerId。 HTML: ...
我想根据验证模式来划分错误消息,例如下面有2种模式 Validators.pattern(/[^ +]/), Validators.pattern(/^[ +|a-zA-Z0-9]+$/), 但是
我使用以下代码创建了一个formControl: this.formGroup.addControl('name', 'defaultvalue', Validators.required)); 如何向该控件添加更多验证器。可以添加这个吗...
我们在 Ionic 4 应用程序中使用“quill”:“1.3.7”版本的 quill 编辑器。我们需要显示工具栏选项的工具提示。是否可以为工具栏启用工具提示...
我试图在带有模板出口的 mat-select 中传递#tmp,但无法显示选择选项。下面是我的代码和 stackblitz 的链接 &...
如何通过路由级提供商正确管理 Angular 中的服务销毁?
我正在开发一个 Angular 项目,其中我延迟加载模块并在路由级别提供多种服务。我的预期是,当用户导航时,这些服务将被销毁
Angular + 动态加载的 Fontawesome 图标错误
我正在使用 Angular (8) 的官方 fontawesome 库,看起来我可以在静态命名图标时完美加载图标 我正在使用 Angular (8) 的官方 fontawesome 库,当静态命名图标 <fa-icon [icon]="faSearch"></fa-icon> 时,我似乎可以完美地加载图标,但在动态加载与 <fa-icon [icon]="item.icon"></fa-icon> 中相同的属性时则不行,在其中我将收到以下控制台错误: ... FontAwesome: Could not find icon with iconName=faSearch and prefix=fas. This warning will become a hard error in 0.6.0. ... 这种情况发生在所有循环图标上,奇怪的是,它会将所有图标解释为来自“fas”(实体)库,尽管有些图标属于“far”(常规)库,因此错误始终显示“前缀” =fas”。 我正在按照文档的建议实例化组件中的图标: import { fas, faSearch, faGlobeEurope } from "@fortawesome/free-solid-svg-icons"; import { far, faFilePdf, faFilePowerpoint, faFileWord, faFileExcel } from "@fortawesome/free-regular-svg-icons"; export class HomeComponent implements OnInit { constructor(...) { } far = far; fas = fas; faFilePdf = faFilePdf; faFilePowerpoint = faFilePowerpoint; faFileWord = faFileWord; faSearch = faSearch; faFolder = faFolder; faGlobeEurope = faGlobeEurope; faFileExcel = faFileExcel; ...} 我尝试了多种选项,但它们似乎无法解决这个问题。 我像这样动态加载我的很棒的图标: parent.component.ts import { Component } from '@angular/core'; import { faTruck } from '@fortawesome/free-solid-svg-icons'; @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css'], }) export class HomeComponent { truckIcon = faTruck; constructor() {} } parent.component.html <div> <app-children [icon]="truckIcon"></app-home-card> </div> child.component.ts import { Component, Input } from '@angular/core'; import { IconDefinition } from '@fortawesome/fontawesome-svg-core'; @Component({ selector: 'app-home-card', templateUrl: './home-card.component.html', styleUrls: ['./home-card.component.css'], }) export class HomeCardComponent { @Input() icon: IconDefinition | undefined; constructor() {} } child.component.html <div> <fa-icon [icon]="icon!"></fa-icon> </div> angular-fontawesome 支持动态渲染图标。看看 文档 我稍微调整了一下以满足我的需要: import { Component, ComponentFactoryResolver, ViewChild, ViewContainerRef, Input, OnInit, ComponentRef, ComponentFactory } from '@angular/core'; import { FaIconComponent } from '@fortawesome/angular-fontawesome'; import { IconDefinition } from '@fortawesome/free-solid-svg-icons'; @Component({ selector: 'app-font-awesome-renderer', template: '<ng-container #host></ng-container>' }) export class FontAwesomeRendererComponent implements OnInit { @Input() icon: IconDefinition; @ViewChild('host', {read: ViewContainerRef, static: true }) container: ViewContainerRef; constructor(private cfr: ComponentFactoryResolver) { } ngOnInit(): void { this.createIcon(); } private createIcon(): void { const factory: ComponentFactory<FaIconComponent> = this.cfr.resolveComponentFactory(FaIconComponent); const componentRef: ComponentRef<FaIconComponent> = this.container.createComponent(factory); componentRef.instance.icon = this.icon; componentRef.instance.render(); } } 我已经用这种方式使用了动态fontawsome图标 home.component.ts @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css'], }) export class HomeComponent implements OnInit, OnDestroy { // Icons faCars = faCar; faToys = faGamepad; // Define array of Object const categories: Category[] = [ { name: 'Cars', icon: this.faCars, }, { name: 'Toys', icon: this.faGames, } ]; } 模态类 export class Category { name: string; icon: IconDefinition; } home.component.html <div *ngFor="let category of categories> <fa-icon [icon]="category.icon"></fa-icon> <span>{{category.name}}</span> </div> 这对我有用
Spring Cloud Gateway 在路由到 Angular 应用程序时进入无限循环
我正在使用 Spring Cloud Gateway 将请求路由到 Angular 应用程序,但遇到了 Spring Cloud Gateway 进入无限循环的问题。日志显示相同的 ui ...
Angular 17(独立)和 Ionic v8 中的字母滚动条
如何在 Angular 17 Standalone 中使用这个很酷的字母滚动条? https://github.com/mooalot/alphabetical-scroll-bar 我将项目升级为独立项目,但没有任何 NGModules.... 或者...
我正在开发一个项目,我需要使用多选下拉菜单实现搜索。当我添加下面的代码时,我可以进行搜索,但我之前选择的值在新搜索后消失了。
我目前正在使用 Angular 构建一个前端网站,用于搜索和显示通过 API 查询获得的信息。当我使用 ng build 将项目编译成静态文件包时
如何用核心模块和功能模块构建应用程序并在不导入的情况下访问功能模块?
我正在开发一个项目,我需要将我的应用程序划分为不同的模块。我想创建一个导入功能模块的核心模块,然后让其他模块使用该核心模块
我正在尝试创建一个递归模板,但遇到了问题。 我的模板: @for(组组;跟踪组;让 i = $index){
如何解决登录后 Angular 应用程序重定向到空白屏幕的问题?
当我作为初学者尝试在网站上实现延迟加载时,遇到一个问题:登录后,登录页面将我重定向到空白屏幕。我该如何解决这个问题?...
您能帮我解决登录后我的 Angular 应用程序重定向到空白屏幕的问题吗?
当我作为初学者尝试在网站上实现延迟加载时,遇到一个问题:登录后,登录页面将我重定向到空白屏幕。我该如何解决这个问题?...
Apache eCharts Angular 在堆栈上绘制标记线
我有一个折线图,其中的 markLine 显示当前日期。不幸的是,该行显示在其他堆栈系列的下方。设置 zLevel 也没有帮助。 { // .. 其他配置