Angular routerLink 不触发 ngOnInit
Angular routerLink does not trigger ngOnInit
这是 componet.ts 文件中的 ngOnInit
ngOnInit() {
this.locationService.getLocation().subscribe( locations => {
this.locations = locations;
});
}
<a [routerLink]="['/locations-list']">
当我使用 [routerLink]
导航到上面的组件时,它会导航到该组件并加载视图,但它不会触发上面的 ngOnInit 方法。但是,如果我刷新页面,它就可以正常工作。
有没有解决以上问题的方法。
我已经使用 href
导航到页面,并且使用 href
上述方法总是可以正常工作,但速度非常慢。这就是为什么我将 href
更改为 [routerLink]
。
这是包含视图
的component.html
<div class="table-responsive">
<table class="table">
<thead class=" text-primary">
<th>
Location Name
</th>
</thead>
<tbody *ngIf="locations?.length > 0">
<tr *ngFor="let location of locations">
<td *ngIf="location.verified != false">
{{location.locationName}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
当路由器参数改变时,基本路由保持不变。所以它不会触发 ngOnInit
。于是订阅路由事件
ngOnInit() {
this.route.params.subscribe(
params => {
// your code
});
}
ngOnInit()只在组件实例化后调用一次,路由改变时不会调用。您可以注入路由器并订阅它的事件或参数以获得有关路由更改的通知。
ngOnInit() {
this.route.params.subscribe(params: any) => {
if(params) //your code
});
}
Try this
// on click call this function
(click)="HyperLink()"
// on ts file
HyperLink(){
window.open('/locations-list');
}
这是 componet.ts 文件中的 ngOnInit
ngOnInit() {
this.locationService.getLocation().subscribe( locations => {
this.locations = locations;
});
}
<a [routerLink]="['/locations-list']">
当我使用 [routerLink]
导航到上面的组件时,它会导航到该组件并加载视图,但它不会触发上面的 ngOnInit 方法。但是,如果我刷新页面,它就可以正常工作。
有没有解决以上问题的方法。
我已经使用 href
导航到页面,并且使用 href
上述方法总是可以正常工作,但速度非常慢。这就是为什么我将 href
更改为 [routerLink]
。
这是包含视图
的component.html <div class="table-responsive">
<table class="table">
<thead class=" text-primary">
<th>
Location Name
</th>
</thead>
<tbody *ngIf="locations?.length > 0">
<tr *ngFor="let location of locations">
<td *ngIf="location.verified != false">
{{location.locationName}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
当路由器参数改变时,基本路由保持不变。所以它不会触发 ngOnInit
。于是订阅路由事件
ngOnInit() {
this.route.params.subscribe(
params => {
// your code
});
}
ngOnInit()只在组件实例化后调用一次,路由改变时不会调用。您可以注入路由器并订阅它的事件或参数以获得有关路由更改的通知。
ngOnInit() {
this.route.params.subscribe(params: any) => {
if(params) //your code
});
}
Try this
// on click call this function
(click)="HyperLink()"
// on ts file
HyperLink(){
window.open('/locations-list');
}