Question

我正在尝试使用TypeScript为我的Angular 2组件提供服务。我阅读了很多关于如何创建服务的教程，所有人都说我的服务需要使用装饰器@Injectable，我应该能够将它注入我的组件中。当我想要注入我的服务时，这似乎对我不起作用，但使用@Inject会这样做。

我的服务：

    import { Injectable } from '@angular/core';
    import { Observable } from 'rxjs';

    @Injectable()
    export class GeolocationService {

    /**
     * Get the current location of the user
     * @return {Observable<any>} An observable with the location of the user.
     */
    public getLocation(): Observable<any> {
        return Observable.create(observer => {
            if (window.navigator && window.navigator.geolocation) {
                window.navigator.geolocation.getCurrentPosition(position => {
                    observer.next(position);
                    observer.complete();
                }, error => {
                    observer.error(error);
                }, {
                    maximumAge: 0
                });
            } else {
                observer.error('Browser does not support location services');
            }
        });
    }
}

我的组件，无效的版本（v1）：

import { GeolocationService } from './geolocation.service';

@Component({
    templateUrl: 'home.component.html',
    styleUrls: [ 'home.component.scss' ],
    providers: [ GeolocationService ]
})
export class HomeComponent implements OnInit {

    constructor(private myService: GeolocationService) {
        this.myService.getLocation()
            .subscribe(position => console.log('my position', position));
            // .error(err => console.log('oop error', err))
    }
}

我的组件，工作版本（v2）

import { GeolocationService } from './geolocation.service';

@Component({
    templateUrl: 'home.component.html',
    styleUrls: [ 'home.component.scss' ],
    providers: [ GeolocationService ]
})
export class HomeComponent implements OnInit {

    constructor(@Inject(GeolocationService) private myService: GeolocationService) {
        this.myService.getLocation()
            .subscribe(position => console.log('my position', position));
            // .error(err => console.log('oop error', err))
    }
}

您能否向我解释为什么只有第二个版本有效？

Answer 1

@Inject()是告诉Angular必须注入参数的手动方式。不建议以您使用它的方式使用它。

对于第一个例子，我认为您没有告诉您的应用模块您正在使用该注射剂。您必须在主应用程序模块上导入它并将其用作provider。然后你就可以将它注入到其他组件中了，正如你对依赖注入器说的那样GeolocationService类现在可以注入到其他类中。

Answer 2

我发现tsconfig.json中缺少“emitDecoratorMetadata”。我把它与“emitDecoratorData”混淆了。谢谢你的帮助！

Angular 2 @Injectable似乎没有用

2 个答案: