标签: angular6

我最近将我的项目从Angular5更新为Angular6.该项目正在成功构建,但我在浏览器控制台中收到以下错误:

未处理的Promise拒绝:StaticInjectorError(AppModule)[options]:StaticInjectorError(Platform:core)[options]:NullInjectorError:没有选项提供者!; 区域:; 任务:Promise.then; 值:错误:StaticInjectorError(AppModule)[options]

有关如何调试这些问题的任何想法？

这是我的app.module:

import { BrowserModule } from '@angular/platform-browser';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { RouterModule, Routes } from '@angular/router';
import { CookieModule } from 'ngx-cookie';
import { PushNotificationsModule, PushNotificationsService } from 'ng-push';

// importing notifications module (angular 2 notifications)
import { SimpleNotificationsModule, …

我们为什么要费心使用import { DOCUMENT } from '@angular/common'？

即使没有它，我也可以访问文档模块

document.getElementById('TestID).focus()

我在导入中看到的唯一区别是将其附加到this关键字。

this._document.getElementById('TestID').focus();

从 Angular 的通用模块导入 DOCUMENT 有什么真正的好处吗？

我做了一些研究，但看不到任何关于此的信息。

我对 AngularJS 发布后的 Angular 版本有点陌生，并决定尝试一下。我想要做的是构建一个 UI 组件库，以及一个将使用所述库的应用程序。在我的库中，我决定将组件创建为 WebComponents，所以按照我目前找到的教程，我有类似的东西

import { Injector, NgModule } from '@angular/core'
import { createCustomElement } from '@angular/elements';
import { MyButtonComponent} from './my-button.component'

@NgModule({
    declarations: [MyButtonComponent],
    entryComponents: [MyButtonComponent]
})
export class MyButtonModule {
    constructor(injector: Injector) {
        const myButton = createCustomElement(MyButtonComponent, { injector });
        customElements.define('my-button', myButton);
    }
}

对于我的自定义组件。如果我将组件的所有文件（模块、组件、模板和 SCSS 文件）直接添加到我的应用程序中，它会按预期工作，所以我知道我的组件声明是正确的。但是，如果在我的应用程序中包含库中的组件，则在使用 运行我的应用程序时ng serve，我会看到错误：

Error: StaticInjectorError(AppModule)[MyButtonModule -> Injector]: 
  StaticInjectorError(Platform: core)[MyButtonModule -> Injector]: 
    NullInjectorError: No provider for Injector!

我正在使用 Angular 6，并且我的两个项目都在本地运行，并且我正在使用ng-packagr捆绑我的库。我在我的库中添加了@angular/coreand @angular/elementsaspeerDependencies …

我正在使用 Angular v6.1.0 和。我的路由文件在这里：

const routes: Routes = [
  {
    path: '', component: DashboardComponent, children: [
      { path: '', redirectTo: 'activity', pathMatch: 'full' },
      { path: 'activity', component: ActivityComponent },
      { path: 'recent-activity', component: RecentActivityComponent },
      { path: 'notification', component: NotificationComponent }
    ]
  },

];

这是我订阅导航事件的代码：

router.events.subscribe((event: Event) => {
      if (event instanceof NavigationStart) {
        // Do something here
      } else if (event instanceof NavigationEnd) {
        // Do something here
      }
    });

当我使用 router.navigation 时， NavigationEnd 被触发。
但是，如果我转到/dashboard路由器，它将重定向到上述路由文件中的 …

我有这个问题，我的应用程序工作正常，但此错误显示在 IDE 中。

员工.service.ts：

import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class EmployeeService {
getEmployee(){
  return [
    {"id":1,"name":"Micheal","age":21},
    {"id":2,"name":"Jackson","age":22},
    {"id":3,"name":"Hales","age":23},
    {"id":4,"name":"Moz","age":25}
  ];
}
  constructor() { }
}

我的employeeDetail.ts 文件是这样的：

import { Component, OnInit } from '@angular/core';
import { EmployeeService } from '../services/employee.service';

@Component({
  selector: 'employee-detail',
  templateUrl: './employee-detail.component.html',
  styleUrls: ['./employee-detail.component.css']
})
export class EmployeeDetailComponent implements OnInit {

  public employees = [];
  constructor(private _employeeService : EmployeeService) {

   }

  ngOnInit() {
    this.employees = this._employeeService.getEmployee();
  }

}

这是 Employee-list.ts

import …

我需要知道如何按条件动态设置FormControl的选定<option>项<select>。

假设我们有客户有订单。有一个下拉菜单，我们可以在其中选择客户，并根据该客户动态设置订单下拉菜单的选项并选择特定订单。

此外，两个下拉菜单都有一个<option>“（新客户/订单）”，以防还没有客户或订单，因此如果我们在没有客户的情况下路由到该表单，则应在两个下拉菜单中选择此“新”选项菜单。如果我们的客户没有订单，则应在订单下拉菜单中选择“新建”选项。

这是 form.component.html：

<form [formGroup]="customerForm">
    <select formControlName="customers">
        <option>(new customer)</option>
        <option [ngValue]="customer" *ngFor="let customer of customers">
            {{customer.name}}
        </option>
    </select>
    <select formControlName="orders">
        <option>(new order)</option>
        <option [ngValue]="order" *ngFor="let order of filteredOrders">
            {{order.id}}
        </option>
    </select>
</form>

这是 form.component.ts：

customerForm: FormGroup;

customers: Customer[] = [
{   "id": 1,
    "name": "Meghan Castellano",
    "orderIds": [1,2] },
{   "id": 2,
    "name": "Monika Weiss",
    "orderIds": [3,4] }];

orders: Order[] = [{"id": 1},{"id": 2},{"id": 3},{"id": 4}];

filteredOrders: Order[];

constructor( private route: ActivatedRoute, …

我正面临 Angular Material Dialog 的一些问题。在所有对话框中的应用程序中几乎没有对话框我可以看到 cdk-global-scrollblock 类正在 html 标签中应用，但在其中一个对话框中它没有被应用。我不知道如何修复它，因为一切看起来都与其他对话框一样。有人可以建议我缺少什么。

在 Angular 6 中使用 SignalR 做一个非常简单的调用来设置连接/停止，我有以下代码：

信号R.helper.ts

  public static setupHub<T>(hubUrl: string, eventName: string, callback: (data: T) => void, ...params: SignalRParam[]): HubConnection {
    const token = localStorage.getItem(appConstant.token);
    const url = this.buidlUrl(hubUrl, ...params);
    const connection = new HubConnectionBuilder()
        .withUrl(url,
            { transport: HttpTransportType.WebSockets, accessTokenFactory: () => token })
        .build();
    environment.production && connection.start();
    !environment.production && connection.start().catch(err => console.error(err.toString()));
    connection.on(eventName, callback);
    return connection;
}

如果我尝试在我的页面上登录，我会在控制台上不断收到此错误：

signalR.helper.ts:19 错误：如果连接未处于“已连接”状态，则无法发送数据。

我是 SignalR 和 Angular 的新手，为什么我一直收到这个错误？

我正在使用有角度的材料轮廓 mat-form-field 来设计一个表单。我得到了带有边框角半径的默认 mat-form-field 轮廓文本框视图。有什么办法可以去掉outline mat-form-field的边框角半径，转换成方形文本框视图。

我尝试使用以下内容更改角材料 mat-form-field 的默认样式，但它不起作用。

//css

.mat-form-field-appearance-outline .mat-form-field-outline-start 
.alignment{
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}

//html

<mat-form-field appearance="outline" [hideRequiredMarker]="true" 
class="alignment">
<mat-label>Email Address</mat-label>
<input type="text" matInput placeholder="Enter email address">
</mat-form-field>

我希望轮廓 mat-form-field 没有边框角半径文本框，就像方形文本框 mat-form-field 一样，但获得默认的轮廓 mat-form-field 视图。

我正在订阅来自 Angular 服务的响应：

  books: BookModel[] = [];

  constructor(private bookService: BookService) { }

  ngOnInit() {

    this.books = this.getBooks();

  }

  getBooks(): BookModel[] {

    return this.bookService.getByCategoryId(1).subscribe((payload: Payload<GetBooksResponse>) => {

      return payload.result.map((response: GetBooksResponse) => { 

        return {
          id: response.id, 
          title: response.title
        };

      });

    });

  }

当我添加return到时this.bookService，例如，return this.bookService我收到错误：

Type 'Subscription' is missing the following properties from type 'BookModel[]': length, pop, push, concat, and 26 more.

我如何使用 return 来完成这项工作？

更新：书模型：

export interface BookModel {
  id: number;
  title: string;
}