Angular @Output没有将值传递给AppComponent?

时间:2017-09-08 13:33:20

标签: angular

我试图使用@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&#8230;</div>
...

我做错了什么?

0 个答案:

没有答案