angular 相关问题

我正在尝试向 mat-list-item 添加一个按钮。这是我当前的 HTML 模板代码：我正在尝试向 mat-list-item 添加一个按钮。这是我当前的 HTML 模板代码： <mat-selection-list [multiple]="false" [class.selected]="currentItem" formControlName="itemListControl" > <mat-list-option *ngFor="let item of items" [value]="item.id" > <div style="display: flex; justify-content: space-between; align-items: center"> <div style="display: flex; align-items: center"> {{ item.name }} </div> <button mat-icon-button> <mat-icon>edit</mat-icon> </button> </div> </mat-list-option> </mat-selection-list> 当我在浏览器中检查站点时，我可以看到有一个 16px 的填充，它将按钮移动到列表项内的左侧：我已经尝试通过将其添加到组件的 scss 文件中来删除它： .mat-list-item { padding-right: 0 !important; } 由于某种原因，这没有任何效果。看起来这甚至根本没有应用于该元素。我做错了什么以及如何摆脱这种填充（不会造成任何潜在的不良副作用）？请按如下方式使用。会起作用的。 .mat-list-text { padding-right: 0 !important; } 谢谢！使用整个选择器（而不是仅仅使用 .mat-list-text，复制上图中突出显示的 css 的所有选择器部分）来删除填充，角度材质很难修改。不要忘记添加 !important 。我以前必须这样做。我希望它也对你有用。步骤1 在您的 component.ts 文件中添加： encapsulation: ViewEncapsulation.None 步骤2 在你的 css 文件中添加新的类自定义选项： .mat-list-option.mat-list-option.custom-option { .mat-list-text { padding-right: 0px !important; } } 步骤3 在您的 .html 文件中将新类添加到您的 mat-list-option 中： <mat-list-option ... class="custom-option"> （注：这是在 Angular V15 上测试的）

html angular sass angular-material angular12

回答 3 投票 0

将 routerLink 放在 Angular 模板上后，Jasmine/Karma 错误“TypeError：无法读取未定义的属性（读取“事件”）”错误

我正在尝试在我的 Angular 应用程序中进行一些测试，但是当我使用 routerLink 添加此行时，测试给出了错误：我正在尝试在我的 Angular 应用程序中进行一些测试，但是当我使用 routerLink 添加这一行时，测试给出了错误： <a class="nav-link" routerLink="../loja-lista" role="tab" type="button"> <fa-icon [icon]="faArrowLeft" style="font-size: x-large; color: #225262"> </fa-icon> </a> package.json： "@angular/common": "^15.2.9", "@angular/compiler": "^15.2.9", "@angular/core": "^15.2.9", ... ... "jasmine-core": "~4.0.0", "karma": "~6.3.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.1.0", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "~1.7.0", 错误 TypeError: Cannot read properties of undefined (reading 'events') TypeError: Cannot read properties of undefined (reading 'events') at new RouterLink (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/router/fesm2020/router.mjs:5711:40) at NodeInjectorFactory.factory (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/router/fesm2020/router.mjs:5865:16) at getNodeInjectable (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:3431:44) ... 这是我的四个测试，在模板中没有 RouterLink 的情况下也能正常工作： import { ComponentFixture, TestBed } from '@angular/core/testing'; import { HttpClientTestingModule } from '@angular/common/http/testing'; import { RouterTestingModule } from '@angular/router/testing'; import { ActivatedRoute, Router } from '@angular/router'; import { LOJAApi } from 'my-lib'; import { EdicaoComponent } from './edicao.component'; describe('EdicaoComponent', () => { let component: EdicaoComponent; let fixture: ComponentFixture<EdicaoComponent>; let lojaService: LOJAApi; let router: Router; let route: ActivatedRoute; beforeEach(async () => { await TestBed.configureTestingModule({ imports: [HttpClientTestingModule, RouterTestingModule, EdicaoComponent], providers: [ { provide: LOJAApi, useValue: lojaService }, { provide: Router, useValue: router }, { provide: ActivatedRoute, useValue: route }, ], }).compileComponents(); fixture = TestBed.createComponent(EdicaoComponent); component = fixture.componentInstance; lojaService = TestBed.inject(LOJAApi); }); it('should create', () => { expect(component).toBeTruthy(); }); it('should return all phone info', () => { component.edicaoForm.value.DDD_FONE = null; component.edicaoForm.value.FONE = null; expect(component.getPhone()).toBe('00 000000000'); }); it('should return DDD', () => { component.edicaoForm.value.TELEFONE = '11999999999'; expect(component.handleDDD()).toBe('11'); }); it('should return phone', () => { component.edicaoForm.value.TELEFONE = '11999999999'; expect(component.handlePhone()).toBe('999999999'); }); }); 您的 routerLink 上缺少括号。 [routerLink]="'../loja-lista'" role="tab" type="button"> https://angular.io/api/router/RouterLink

angular unit-testing jasmine karma-runner angular-test

回答 1 投票 0

Angular Firebase：登录页面刷新时闪烁（AuthGuard + redirectUnauthorizedTo）

我遇到一个问题，即在将 Firebase 身份验证与 Angular 结合使用时，登录页面在刷新时会短暂闪烁，然后将我重定向到预期的 URL。理想情况下，登录页面应该...

angular firebase-authentication auth-guard

回答 1 投票 0

订阅 NGRX 操作流是否被视为代码异味？

我问自己直接订阅NGRX操作流是否被认为是代码味道。考虑以下用例：假设我有一个存储在 NGRX 存储中的实体列表...

angular rxjs action ngrx

回答 1 投票 0

Angular 2 HostListener 按键检测到转义键？

我正在使用以下方法来检测页面上的按键。我的计划是检测何时按下 Escape 键并在按下时运行一个方法。目前我只是尝试记录哪个键是 p...