我是Angular的新手,无论我搜索什么,我都没有找到关于这个主题的明确答案.
目前正在运作:
<div class="col-sm" (click)="brandListRoute()">
Run Code Online (Sandbox Code Playgroud)
它指向我的组件中的此函数:
brandListRoute() {
this.router.navigate(['explore/brands']);
}
Run Code Online (Sandbox Code Playgroud)
所以这很好用,但是当我第一次尝试这样绑定时[routerLink]
:
<div [routerLink]="['explore/brands']"> </div>
Run Code Online (Sandbox Code Playgroud)
我可以点击div但没有任何反应.所以我的问题是,做了[routerLink]
的事情只有一样工作anchor tags
和buttons
或者是我上面的逻辑缺陷?
需要为我的问题找到最佳解决方案.非常感谢提前!
我一直在尝试为我的 Angular 组件编写单元测试。目前,在我的服务调用中获取组件的数据时,我有一个可观察的值,一旦调用完成,该可观察值就会被赋予 true 。在我的组件中订阅了这个可观察对象,以便组件知道调用何时完成。我已经成功地模拟了组件中对数据的调用,但我正在努力寻找一种方法来模拟单个可观察值。
我能找到的关于 SO 的所有问题都是关于模拟组件中服务的函数调用,但我能找到的所有问题都不是关于模拟单个可观察的。
这是我在服务中的函数调用。正如您所看到的,一旦函数运行,可观察量就会被赋予一个新值finalize
:
public getSmallInfoPanel(key: string): BehaviorSubject<InfoPanelResponse> {
if (key) {
this.infoPanel = new BehaviorSubject<InfoPanelResponse>(null);
this.http.get(`${this.apiUrl}api/Panels/GetInfoPanel/${key}`).pipe(
retry(3),
finalize(() => {
this.hasLoadedSubject.next(true);
}))
.subscribe((x: InfoPanelResponse) => this.infoPanel.next(x));
}
return this.infoPanel;
}
Run Code Online (Sandbox Code Playgroud)
Observable
这是我在服务中创建的方法:
private hasLoadedSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
public hasLoadedObs: Observable<boolean> = this.hasLoadedSubject.asObservable();
Run Code Online (Sandbox Code Playgroud)
然后在我的组件中,我订阅了Observable
从以下位置创建的内容BehaviourSubject
:
public hasLoaded: boolean;
ngOnInit() {
this.infoPanelSmallService.hasLoadedObs.subscribe(z => this.hasLoaded = z);
}
Run Code Online (Sandbox Code Playgroud)
当我运行ng test
组件测试失败时,因为它不知道是什么,hasLoadedObs
所以它无法订阅它。
如果我可以提供更多信息,请告诉我。谢谢。
更新1
describe('InformationPanelSmallComponent', () => {
let …
Run Code Online (Sandbox Code Playgroud) 所以 console.log 部分只是为了让我在将这段代码实现到我的整体解决方案之前更容易看到输出。我在堆栈溢出中读到您以这种方式选择数据属性:
$("li[data-city*=New York]")
Run Code Online (Sandbox Code Playgroud)
但是,例如我想选择我的所有数据属性,这些属性在我的 html 中如下所示:
data-group='value'
Run Code Online (Sandbox Code Playgroud)
那么一旦我选择了这些数据属性,我将如何通过 console.log 记录数据组属性的实际字符串值部分。
这似乎是一个基本问题,但即使是一个简单的简短回答也会有很大帮助。问候 :)
我目前正在考虑确保我的应用程序没有内存泄漏。我下面这个在那里他展示了如何使用改变教程subscribe()
来async
,以及展示如何在明确的退订ngOnDestroy
。
我正在努力测试我的实现是否有效,我想知道我在我的项目中的实现是否真的取消订阅。
这是他的组件教程中的内容:
@Component({
/* ... */
template: `
<ul *ngIf="todos.length > 0">
<li *ngFor="let todo of todos">{{todo.name}}</li>
</ul>
`
})
export class TodosComponent implements OnInit, OnDestroy {
private unsubscribe$ = new Subject<void>();
todos: Todo[];
constructor(private store: Store<State>) {}
ngOnInit() {
this.store
.pipe(select(selectTodos), takeUntil(this.unsubscribe$)) // unsubscribe to prevent memory leak
.subscribe(todos => this.todos = todos); // unwrap observable
}
ngOnDestroy(): void {
this.unsubscribe$.next();
this.unsubscribe$.complete();
}
}
Run Code Online (Sandbox Code Playgroud)
我的 ngOnDestroy 看起来和他的完全一样,但这就是我对服务的调用:
this.insightsService.getLatestsInsights(5)
.pipe(takeUntil(this.unsubscribe$))
.subscribe(z …
Run Code Online (Sandbox Code Playgroud) angular ×3
html ×1
jasmine ×1
jquery ×1
memory-leaks ×1
routing ×1
typescript ×1
unit-testing ×1