![](/img/trans.png)
[英]How do I get my Angular 6 components to inherit it's extended component's styles?
[英]How do i get my UI components in Angular 8
我正在使用我自己創建的組件。 app-button.ts
做了什么,它檢查當前用戶角色,然后在它匹配定義的角色時呈現。
ButtonType 只是定義使用什么樣式。
演示.ts:
<app-button
buttonText="BACK"
(clickEvent)="goBack()"
[buttonType]="'secondary'"
>
</app-button>
app-button按鈕實現:
<button *ngIf="canRender" class="{{ buttonClass }}" (click)="onClickEvent()" [disabled]="disabled">
<span class="{{ spanClass }}">{{ buttonText }}</span>
</button>
app-button.ts 文件:
export class PrimaryButtonComponent implements OnInit {
@Input() buttonText: string;
@Input() disabled? = false;
@Input() allowedRoles: Role[] = [];
@Input() buttonType = 'primary';
canRender? = false;
buttonClass: string;
spanClass: string;
@Output() clickEvent = new EventEmitter();
constructor(private credentialsService: CredentialsService) {}
ngOnInit() {
if (this.allowedRoles.length !== 0) {
const currentUserRoles: Role[] = this.credentialsService.currentUserValue.role.slice();
this.canRender = allowedToAccess(this.allowedRoles, currentUserRoles);
} else {
this.canRender = true;
}
if (this.buttonType === 'primary') {
this.buttonClass = 'primary-button';
this.spanClass = 'primary-button-text';
}
if (this.buttonType === 'secondary') {
this.buttonClass = 'secondary-button';
this.spanClass = 'secondary-button-text';
}
}
onClickEvent() {
this.clickEvent.emit();
}
}
單元測試:
fit('should navigate back to dashboard when click back button', async(() => {
const onClickSpy = spyOn(component, 'goBack').and.callThrough();
const routerSpy = spyOn(router, 'navigate');
// Click Back button
const button = fixture.debugElement.query(By.css('.secondary-button'));
expect(button).not.toBeNull();
}));
當我進行單元測試時,我看到了這個錯誤
Error: Expected null not to be null.
但我的實際用戶界面正在顯示組件。 在測試中它怎么可能為空?
在TestBed.configureTestingModule
的declarations
數組中,添加ButtonComponent
(假設ButtonComponent
就是所謂的類)。 這樣做之后, expect(button).not.toBeNull();
應該不錯。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.