我试图使用@Output装饰器将子组件的加载布尔值传递给AppComponent,但我没有看到所需的结果。
资金-list.component.ts
@Component({
selector: 'app-funds',
templateUrl: './funds-list.component.html',
styleUrls: ['./funds-list.component.scss'],
providers: [FundsService]
})
export class FundsListComponent implements OnInit {
constructor(private fundsService: FundsService) { }
@Output() LoadingChanged = new EventEmitter();
funds: Fund[];
ngOnInit() : void {
this.fundsService.getFunds()
.subscribe(funds => {
this.LoadingChanged.emit(false);
return this.funds = funds
});
}
}
app.component.ts
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
// Sets initial value to true to show loading spinner on first load
loading : boolean = true
constructor(private authenticationService: AuthenticationService, private router: Router) {
router.events.subscribe((event: RouterEvent) => {
this.navigationInterceptor(event)
})
}
LoadingChangedHandler(color:string) {
this.loading = false
}
// Shows and hides the loading spinner during RouterEvent changes
navigationInterceptor(event: RouterEvent): void {
if (event instanceof NavigationStart) {
this.loading = true
}
// if (event instanceof NavigationEnd) {
// this.loading = false
// }
// Set loading state to false in both of the below events to hide the spinner in case a request fails
if (event instanceof NavigationCancel) {
this.loading = false
}
if (event instanceof NavigationError) {
this.loading = false
}
}
}
请注意,我评论过event instanceof NavigationEnd
。当我取消注释时,加载div消失,因此看起来如果加载设置为false,那么事情就会起作用。
app.component.html
...
<router-outlet (LoadingChanged)="LoadingChangedHandler($event)"></router-outlet>
<div class="loading" *ngIf="loading">Loading…</div>
...
我做错了什么?