标签: angular-services

在 Angular 中，我有一个服务，通过constructor(...). 然而，该服务也是在某个地方通过调用构造函数创建的。因此，在参数中添加它所依赖的另一个服务将会改变 API。我想避免这种情况。

有没有办法将一个服务注入另一个服务而不将其添加到构造函数参数中？例如现场注入？

import {Inject, Injectable} from "@angular/core";
import {
    Http, Request, ConnectionBackend, RequestOptions, RequestOptionsArgs, Response, Headers,
    RequestMethod
} from "@angular/http";

import {KeycloakService} from "./keycloak.service";
import {Observable} from 'rxjs/Observable';
import {EventBusService} from "../events/event-bus.service";
import {LoadingSomethingFinishedEvent, LoadingSomethingStartedEvent} from "../events/windup-event";

@Injectable()
export class WindupHttpService extends Http {
    constructor(
        _backend: ConnectionBackend,
        _defaultOptions: RequestOptions,
        private _keycloakService: KeycloakService,
        // ----- This is what I want to avoid. -----
        private _eventBus: EventBusService,
    ) {
        super(_backend, _defaultOptions);
    }

    // -------  This is …

我有一组对象，我将其放在选择选项上，我想在选择选项中选择一个对象列表。但是我无法获取该对象列表的值。它输出[对象] [对象]。我想获得该公司选定的对象列表。我将它分配给[值]，它得到[对象][对象]。

<div class="select" >
    <select class="form-control col-lg-8" #selectedValue (change)="assignCorporationToManage(selectedValue.value)">
        <option *ngFor="let corporation of user_corporations" [value]="corporation">{{corporation.corp_name}}</option>    
    </select>
</div>

ts

assignCorporationToManage(selectedValue) {
     console.log(selectedValue)
}

在我的角度navbar我有一个*ngIf而不是或不登录/注销按钮应该显示

*ngIf="!authService.loggedIn()

它使用带有此 LoggedIn 函数的服务，该函数返回 true 或 false

  loggedIn() {
    return this.http.get('http://localhost:3000/users/validateToken')
      .map(res => res.json()).map(data => data.success);
  }

但这是异步的，我如何等待ngIf它？或者我怎样才能以不同的方式得到相同的结果？

我需要获取反应式表单输入email并将password它们传递给我的函数，该函数调用注册服务方法以使用电子邮件在 firebase 中注册新用户。不幸的是，在表单提交后，在 Chrome 控制台中我得到RegisterComponent.html:2 ERROR ReferenceError: email is not defined

我的代码现在看起来像这样：

注册.组件.ts

export class RegisterComponent {
  form: FormGroup;

  constructor(fb: FormBuilder, private authService: AuthService) {
    this.form = fb.group({
  email:['',Validators.required ],
  password:['',Validators.compose([Validators.required,
    PasswordValidator.cannotContainSpace])]
    })
    email = this.form.controls['email'].value;
    password = this.form.controls['password'].value;
   }


   signInWithEmail() {
     this.authService.regUser(this.email, this.password);
   }
}

我的 AuthService 文件：

 regUser() {
    firebase.auth().createUserWithEmailAndPassword(email, pass)
 .catch(function(error) {
   // Handle Errors here.
   var errorCode = error.code;
   var errorMessage = error.message;
   // ...
 });
console.log(this.form.controls['email'].value);
    }

这只是与问题相关的我的代码的一部分。我没有包括注册表，因为它又大又乱，所以我认为您不需要看到它。提前致谢。

编辑：

注册.component.html …

我有ASP.Net Core 2.1 API。如下所示。

[HttpPost]
public async Task<IActionResult> Post([FromBody]string email) {

}

当从邮递员调用时，我必须如下调用上述 API，并将标头设置为Content-Type = application/json

从应用程序调用相同的 API 时 Angular 8。

public send(email: string) {
   //other tried option #1 let obj = JSON.stringify(email);
   //other tried option #2 let obj = this.http.post(API.Url, {email});
   /other tried option #3 let obj = 

   return this.http.post(API.Url, email).pipe(
      retry(2)
   );
}

这引发了以下错误：-

415 不支持的媒体类型；

如果调用已更新标头：-

/* httpOptions = new HttpHeaders({
    'Content-Type': 'application/json'
}*/
public send(email: string) {
 return this.http.post(API.User, email , httpOptions).pipe( …

我想知道如何使用路由器在两个组件之间传递数据。下图是我的组件视图的屏幕截图。

当我单击“查看报告”按钮时，我需要使用每个报告的数据“调用”另一个组件。

下面几行代码是调用查看报表按钮的方法viewFuelReport()；它会在新选项卡中打开另一个包含数据的组件。

<button type="button" (click)="viewFuelReport()" class="btn btn-success">
     View report
</button>

viewFuelReport(){
    this.router.navigate([]).then(result => {
      window.open("/pages/view-report", "_blank");
    });
  }

如何使用 Angular 中的路由器将数据从一个组件传递到另一个组件？

@Injectable() 装饰器中“root”中提供的服务是否仍然必须位于模块的提供者数组中？

Angular文档并没有真正给我答案，或者我不太理解它。

在我的核心文件夹中，我有一个在根目录中提供的身份验证服务。我不想将我的核心模块导入到应用程序模块中，以便使用提供的所有服务和组件。

我是否必须在模块的提供者数组中另外设置服务，或者已经使用装饰器在根级别提供该服务就足够了吗？

我注意到，如果没有使用显式范围定义注入，角度类将无法识别注入的服务。

下面的代码不起作用

constructor(router: Router) {}

但这个确实如此。

constructor(private router: Router) {}

谁能解释为什么？我相信，如果您没有显式编写属性的范围定义，那么默认情况下它是公共的，就像类属性一样，但似乎不是这里的情况。

我发现我可以通过在工厂中使用get()方法返回一个对象的实例,该方法返回新的服务实例.

但是如果我的对象不是服务(在这里谈论语义)会怎样.EG我有一个页面上有很多图表,图表对象(下面)不是(语义上)服务.

所以我必须使用像factory/provider/etc模式这样的东西来声明它吗？这感觉不对,因为它实际上并不是一项服务.但我需要从我的控制器中引用它,因此需要注入或以某种方式访问​​它.我不希望它污染全球范围.

var Chart = function () {
    var self = this;
    this.initialize = function (name, clientMethod, usingDateRange, usesAnalytics, initCB, serviceCB, highchartsConfig) {

        this.name = name;
        this.clientMethod = clientMethod;
        this.usingDateRange = usingDateRange;
        this.usesAnalytics = usesAnalytics;
        this.initCB = initCB;
        this.serviceCB = serviceCB;
        this.highchartsConfig = highchartsConfig;

        this.$chart = $('#' + name);
        this.isIncluded = false;

        this.highchartsConfig.chart.renderTo = this.name;

        this.initCB && this.initCB(this);
    };
};

在下面的函数中，console.log（data）返回我的有效负载，但在console.log（this.finalData）中却得到“未定义”。将预订的数据存储到我的this.finalData变量中的最佳做法是什么？

component.ts

getFavorites(){
  this.jobService.getFavoritesFromDB().subscribe((data) =>  { 
   console.log(data)
   this.finalData = data
  });
  console.log(this.finalData)

 }

服务

getFavoritesFromDB(){
    return this.http.get("http://localhost:3000/post");
}