标签: angular7

我有一个带有成员数组的“聊天”集合，其中包含参与聊天的用户。问题是我想获得当前用户参与的所有聊天。

我用这个查询来做到这一点：

getUserChats(): Observable<Chat[]> {
    return this.auth.currUser
      .pipe(
        take(1),
        switchMap(user => this.afs
            .collection('chats', ref => ref.where('members', 'array-contains', `/users/${user.uid}`))
            .snapshotChanges()
            .pipe(
              map(actions => {
                return actions.map(action => {
                  const data = action.payload.doc.data() as Chat;
                  const id = action.payload.doc.id;
                  return {id, ...data};
                });
              })
            ) as Observable<Chat[]>
        )
      );
  }

这适用于字符串，但不适用于引用。我怎样才能让它在参考文献上工作？

绿色有效红色无效

绿色：字符串红色：参考

在 Angular 7 中，如果我们有一个声明为 @Injectable({providedIn: 'root'}) 的服务，它的构造函数何时执行？它是在构建使用它的组件（作为依赖项）时执行还是等到该服务中的方法首次被调用？

注意：由于服务是单例，我使用服务的构造函数来初始化一些值。我可以创建一个“Initialize()”方法并在组件的构造函数中调用它，但我发现这种方法有点混乱。

我上传文件FORMDATA在角7使用此代码HttpClient为http:

sendImageFile(subUri: string, id: number, fileToUpload: File): Observable<any> {
  const formData: FormData = new FormData();
  formData.append('file', fileToUpload, fileToUpload.name);
  formData.append('photoalbum_id', id.toString() );
  // ... some other .append()

  const customHeaders = new HttpHeaders({
    'Authorization': 'Bearer' + localStorage.getItem('token'),
    'Accepted-Encoding': 'application/json'
  });

  const customOptions = {
    headers: customHeaders,
    reportProgress: true
  };

  return this.http.post(this.url, formData, customOptions)
    .pipe(
      map( (event: HttpEvent<any>) => this.getEventMessage(event, fileToUpload)),
      tap(message => this.showProgress(message)),
      // last(),
      catchError(this.handleError));
}

private showProgress(message: any) {
  // ...
}

private getEventMessage(event: HttpEvent<any>, file: …

我使用反应形式和有角度的材料mat-select创建了一个表单，我用它来创建一个名为“核心”的对象。核心对象有两个属性：“name”和“owners”。“owners”属性是一个IUser对象数组。

核心对象：

export interface ICore {
  id?: number;
  name: string;
  owners: IUser[];
}

表格：

<form [formGroup]="parentForm">
      <mat-form-field class="example-full-width">
        <input matInput formControlName="name" placeholder="Name">
      </mat-form-field>

      <mat-form-field class="example-full-width">
        <mat-label>Users</mat-label>
        <mat-select formControlName="owners" multiple>
          <mat-option *ngFor="let user of users" [value]="user"> {{ user.username }}</mat-option>
        </mat-select>
      </mat-form-field>
    </form>

“ users ”变量是可以选择的所有可用用户的数组。

 users: IUser[];

该表单效果很好，但现在我想使用相同的表单来编辑核心对象，为此我需要在加载页面时在“所有者”表单控件中显示核心所有者。

表单创建：

  createForm() {
    this.coreForm = this.formBuilder.group({
      name: ['', [Validators.required]],
      owners: ['', [Validators.required]]
    });
  }

我如何获得核心：

getCore() {
    this.coreService.getCore(this.route.snapshot.params['id'])
      .subscribe(
        res => {
          this.core = res;
          this.updateForm();
        }, …

使用 Karma 在 Angular 7 中测试应用程序，我无法删除 subj 中的错误。

我已经搜索了各个地方（主要是在这里），但是解决方案要么不起作用，要么与我的情况无关。

App.component.html：

<app-header></app-header>
<router-outlet></router-outlet>

Header.component.ts：

import { Component, OnInit, ViewChild, ElementRef, AfterViewInit, EventEmitter, Output } from '@angular/core';
import { Router } from '@angular/router';
import { Location } from '@angular/common';

@Component({
    selector: 'app-header',
    templateUrl: './header.component.html',
    styleUrls: ['./header.component.less']
})
export class HeaderComponent implements AfterViewInit, OnInit {
    constructor(private location: Location, private router: Router) { 
        setInterval(() => {
            this.now = new Date();
        }, 1000);
    }
...
    onKeyDown(event: KeyboardEvent): void {
        event.preventDefault();
        if (event.which === this.KEY_ESCAPE){
            if …

在我的Angular项目中,我正在为我自己的小本地化服务导入JSON文件.我正在使用此处建议的方法,将我更新typings.d.ts为

declare module "*.json" {
    const value: any;
    export default value;
}

这适用于Angular 6,但在更新到Angular 7后,当我尝试访问属性时,我的导入似乎未定义.

import * as de from './strings/de.json';
import * as en from './strings/en.json';

var s = en["mykey"]

JSON有一个非常简单的key => value结构:

{
  "myKey": "My Headline",
  …
}

6.1和7之间有什么变化可能会导致这种行为？

可能是最常见的问题之一，而我发现的文档和其他一些问题试图为我解决问题，但是我仍然不确定如何解决此问题。

这是我的结构：

• 应用模块当然是引导的主要模块
• Countryselector模块：负责加载默认国家（基于IP），并根据浏览器决定使用哪种语言。基本上，它是决定使用哪个国家/地区语言的核心功能，并且包含一个供用户更改国家/地区语言的下拉菜单。
• 结帐模块，选择模块，付款模块都通过路由延迟加载。

应用模块

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    HttpClientModule,
    BrowserModule,
    AppRoutingModule,
    ContrySelectorModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  export class AppModule { }

CountrySelectorModule

@NgModule({
  declarations: [CountryselectorComponent],
  imports: [
    CommonModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  exports: [
    CountryselectorComponent
  ]
})
export class ContrySelectorModule { }

选择模块：

@NgModule({ …

过去几周我一直在使用角度,现在我需要动态设置公共站点的样式.网站管理员在数据库中设置各种颜色代码以及来自管理员的徽标图像.这些将在公共站点打开时反映出来.

因为我来自asp.net背景,之前我要做的是在母版页加载,从数据库获取值并将它们写入.less文件,让java脚本库来处理它.这很简单.

但对于我目前的情况,我使用sass,我无法找到将变量写入.scss文件的方法.

我刚刚从这里学习了一个新东西APP_INITIALIZER ,但最终这篇文章没有显示如何在.scss文件中写.

我实际上是用我的asp.net知识来思考这个问题,但可能是我错了,或者还有另一种实现方式.

我想要一个简单的解决方案,我们在asp.net中做什么我想以同样的方式实现这一点.

1. 当应用程序第一次加载时,从数据库通过api获取变量值.

2. 在SASS变量文件中写入值.

3. 之后SASS将负责这一点,我们得到预期的结果.

请先给出一些建议或示例.

谢谢.

我已经定义了SCSS变量，src/styles/settings/_variables.scss并将它们导入src/styles.scss，但是仍然不是每个组件都可以使用这些变量。

有什么办法可以创建一个包含其余组件所有SCSS变量的全局文件？因为@import在每个单个组件.scss文件中编写文件都非常令人沮丧，尤其是当我有许多嵌套组件时。

我知道，有很多类似的问题，但似乎它们都已过时，并且与Angular的最新版本无关。

我将Angular 7.3与CLI一起使用。

我正在做一个由后端+前端组成的7+项目。现在，我面临一个需求，我需要再创建一个包含前端+后端的项目。但是存在一些可重用的前端代码，可以在两个应用程序之间重用。

我的个人结构

需求

因此，当我阅读有关图书馆的概念时，我会发现

1）创建两个前端应用程序并共享一个公共库

因为我使用通过Visual Studio创建的（如图所示asp.net角模板项目，我不能采取这种方法在这里）。两个应用程序（项目一和项目二）具有自己的FE + BE。因此，我无法将两个FE应用程序分组到同一文件夹中，并使它们使用共享库。

2）创建库并上传到npm并用作依赖项

我不能采用这种方法，因为代码是专有的，不能在网络外部共享。此外，没有本地公司npm注册表可使用公司npm。

我知道可以使用库概念来完成。但是我不了解如何在多个应用程序中完成此操作。有人可以提供解决方案吗？谢谢 ！