小编Boz*_*ski的帖子
本地主机的 Msal Angular HTTP 拦截器未附加令牌
我正在尝试调用本地主机 API 并在标头上附加不记名令牌。它应该由 msal-angular 自动完成。现在，我已将 localhost API 路由添加到 protectedResourceMap，但标头中没有不记名令牌。尝试添加 jsonplaceholder 和 graph.microsoft 以对其进行 HTTP post 调用，并且可以正常工作。唯一的问题是当我尝试对 localhost API 进行 HTTP 调用时。
我正在使用：
@azure/msal-browser@2.12.0
@azure/msal-angular@2.0.0-beta.0
我在 app.module.ts 中使用了工厂提供程序作为拦截器。
export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
const protectedResourceMap = new Map<string, Array<string>>();
protectedResourceMap.set('https://graph.microsoft.com/v1.0/me', [
'user.read',
]);
protectedResourceMap.set('http://localhost:5000/api/add', [
'api://custom api consent'
]);
protectedResourceMap.set('https://jsonplaceholder.typicode.com/', [
'api://custom api consent'
]);
return {
interactionType: InteractionType.Redirect,
protectedResourceMap,
};
}
它也在 app.module.ts 中注册
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: MsalInterceptor,
multi: true,
},
{
provide: MSAL_INSTANCE,
useFactory: MSALInstanceFactory,
}, …推荐指数
解决办法
查看次数
模块中的 Angular APP_INITIALIZER 无法正常工作
我有 auth 模块，它在应用程序初始化程序之前导入并设置 msal 配置。我使用 APP_INITIALIZER 阻止应用程序的初始化并获取 MSAL-ANGULAR 的配置。该问题仅存在于 Firefox 中。该应用程序在 Chrome、Egde、Safari 上运行得非常好，但在 Firefox 上却不行。在与 Firefox 不同的所有其他浏览器上，APP_INITIALIZER 会阻止启动，直到加载 config.json。我注意到 MSALInstanceFactory 在初始化器工厂函数之前被调用。
我在 auth.module 中使用的代码
export function initializerFactory(env: ConfigService, configUrl: string): any {
// APP_INITIALIZER, angular doesnt starts application untill it completes loading config.json
const promise = env.init(configUrl).then(val => {});
return () => promise;
}
export function loggerCallback(logLevel: LogLevel, message: string): void {
console.log(message);
}
export function MSALInstanceFactory(configService: ConfigService, constant: SecurityConstants): IPublicClientApplication {
return new PublicClientApplication({
auth: {
clientId: configService.getSettings('clientId'),
redirectUri: …推荐指数
解决办法
查看次数
在 Angular 中使用可观察存储和组件输入
我使用 a 开发了一个自定义角度商店，BehaviorSubject并且使用如下：
export class UserFaceComponent {
@Input()
public id: any;
public presence$: Observable<boolean>;
constructor(private _store: Store) { }
public ngOnInit() {
this.presence$ = this._store
.select(s => s.users.presences)
.pipe(
map(p => p.includes(this.id))
);
}
}
这样，当存储更改时，presence$可观察对象会发出新值。它工作得很好，但是，id传递给组件的也可能会改变。假设页面上有一个用户列表，当用户选择其中一个时，它会更新传递selectedUserId给UserFaceComponent. 这将是与以前相同的组件，但id会更新。
这意味着我必须在组件中创建一个主题，订阅钩子onChange并在 id 更改时发出该主题。然后，我必须将此可观察值与上面的可观察值合并，然后发出新值。
这可行，但非常麻烦，我不想被迫为用这种方法制作的每个组件执行此操作...我考虑了一段时间，但我找不到另一个解决方案来解决这个问题...
推荐指数
解决办法
查看次数
在我有输入字段的地方将 HTML 转换为 Word DOC
从 HTML 转换为 DOC 的问题在于输入字段。是否可以仅从输入字段中提取到 DOC 值，而不能直接从浏览器中提取整个元素？
示例 HTML：
<html>
<head>
<title>How to Export HTML to Word Document with JavaScript</title>
</head>
<body>
<div class="source-html-outer">
<div id="source-html">
<h1>
<center>Artificial Intelligence</center>
</h1>
<h2>Overview</h2>
<p>
Artificial Intelligence(AI) is an emerging technology
demonstrating machine intelligence. The sub studies like <u><i>Neural
Networks</i>, <i>Robatics</i> or <i>Machine Learning</i></u>
are the parts of AI. This technology is expected to be a
prime part of the real world in all levels.
</p>
<input type="text" value="123456" />
<input type="text" value="123456" …推荐指数
解决办法
查看次数
找不到管道“异步” - Angular 11
我正在尝试使用 Angular 11 作为可观察对象获取数据，并且在延迟加载的组件/模块中使用异步或 json 管道时遇到问题。我在控制台中收到错误消息。
模块：
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TestRoutingModule } from './test-routing.module';
import { TestComponent } from './test.component';
@NgModule({
declarations: [TestComponent],
imports: [CommonModule, TestRoutingModule],
})
export class TestModule {}
组件：
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.scss'],
})
export class TestComponent implements OnInit {
user$: Observable<any>;
constructor(private http: …推荐指数
解决办法
查看次数
单元测试 - Angular 9 中未定义的 ag-grid API onFilterChanged
我正在 Angular 中编写 Ag-grid 的单元测试用例，其中有 Angular Grid：外部过滤器，它是切换过滤器复选框。我收到“TypeError：无法读取未定义的属性‘onFilterChanged’”
我正在测试这个方法：
toggleCheckboxMethod({ checked }): void {
isChecked = checked;
this.gridApi.onFilterChanged(); //when this method initiates it causes for test to fail
}
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
RouterTestingModule.withRoutes([]),
HttpClientModule,
HttpClientTestingModule,
AgGridModule.withComponents([]),
MatDialogModule,
BrowserAnimationsModule
],
declarations: [ TestComponent ],
providers: []
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(TestComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should toggle checkbox', () => {
let isChecked = false;
spyOn(component, 'toggleCheckboxMethod').and.callThrough();
component.toggleCheckboxMethod({ checked: true });
expect(component.toggleCheckboxMethod).toHaveBeenCalled();
expect(isChecked).toEqual(true); …推荐指数
解决办法
查看次数
有没有办法知道图像是否已加载到 Angular 的 dom 中
我实际上正在研究 Angular，我想知道是否有办法知道图像是否已正确加载到 dom 中。我尝试使用this.image.nativeElement.width，但宽度是在图像加载之前发送的。
超文本标记语言
<img #image [src]="imagePath">
TS
@ViewChild('image', {static: true})
image: ElementRef<HTMLImageElement>;
推荐指数
解决办法
查看次数
ag-grid：如何在标题显示中将两列显示为单列？
我的列定义如下所示，并且我请求显示为名称 = 名字 + 姓氏，而不是显示为网格中的两个不同列。
var users_column = [
{
field: 'FIRST_NAME',
suppressMenu: true,
}, {
field: 'LAST_NAME',
suppressMenu: true,
},
推荐指数
解决办法
查看次数
标签 统计
angular ×7
ag-grid ×2
javascript ×2
msal-angular ×2
typescript ×2
angular-pipe ×1
html ×1
rxjs ×1
store ×1
tsconfig ×1
viewchild ×1