标签: angular9

我正在从事 Angular 9 项目。

我有一个组件接受 formBuilder 作为来自父组件的输入。这是我的子组件（我正在测试的组件）：

export class ChildComponent implements OnInit {
  @Input() parentForm: FormGroup;  //this is coming from the parentComponent

  ngOnInit(): void {
    if (this.parentForm) {
      this.filteredSelectables = this.parentForm
        .get("recipientTypes")
        ...
    }
  }
...

我想为此组件编写测试，但我需要创建一个测试可以使用的表单（或者我需要模拟父组件并返回我想要的表单？）

我已将 FormBuilder 添加到 testBed 提供程序中，但我仍然不知道如何制作可以测试的模拟表单。“应该创建”测试正在通过，但我无法测试其他任何内容，因为它们的parentForm 不能为空。这是我当前的测试：

describe("ChildComponent", () => {
  let component: ChildComponent;
  let fixture: ComponentFixture<ChildComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ChildComponent, MatAutocomplete],
      providers: [FormBuilder],
      schemas: [CUSTOM_ELEMENTS_SCHEMA]
    })
      .compileComponents()
      .then(() => {
        fixture = TestBed.createComponent(ChildComponent);
        component = fixture.componentInstance;
      });
  }));

  beforeEach(() => { …

我需要对元素进行切换操作：

   <p-overlayPanel #panel>...

我必须将其放入我的 .ts 代码中：

    @ViewChild('panel') someInput: ElementRef;
this.someInput.toggle()

之后我不知道我必须做什么？有人可以帮助我吗？

我正在使用 ionic 5 和 Angular 9。我正在尝试创建一个反应式表单，但出现错误“没有名称的表单控件的值访问器：'姓氏'”。

这是我的代码：

export class ModalComponent implements OnInit {

  public form: FormGroup;

  constructor(private modalController: ModalController,
              private formBuilder: FormBuilder) { }

  ngOnInit(): void {
    this.initForm();
  }

  public close(): void {
    // using the injected ModalController this page
    // can "dismiss" itself and optionally pass back data
    this.modalController.dismiss({
      'dismissed': true
    });
  }

  public initForm(): void {
    this.form = this.formBuilder.group({
      firstname: ['', Validators.required],
      lastname: ['', Validators.required]
    });
  }

  logForm(){
    console.log(this.form.value)
  }
}

<form [formGroup]="form" (ngSubmit)="logForm()" novalidate>
    <ion-item>
      <ion-label>Last name</ion-label> …

在更新到Angular 9之前，我的项目被配置为ng generate在运行命令时使用 SCSS ，确实如此。

令我沮丧的是，ng g c在 Angular 9 上运行我的第一个之后，它添加了一个css文件而不是一个scss文件。

对此的公认答案似乎不再起作用。我的angular.json包括以下内容（就像过去两年一样）：

  "schematics": {
    "@schematics/angular:component": {
      "styleext": "scss"
    }
  },

我该如何解决？

我的目标是拥有一个包含共享部分的 Angular 项目：功能、类、外观、服务和页面组件（页眉、页脚、一些指令）。然后在它内部有 2 个（或更多应用程序）将使用共享部分并在其顶部添加自己的组件（页面）和路由。

然后这两个应用程序应该构建到不同的 dist 文件夹，以便可以部署到不同的地方（URL）。我希望能够同时运行（服务）它们（可能在不同的端口上）。

我想我应该从在项目中创建新应用程序开始：

ng generate application app1 --routing
ng generate application app1 --routing

和图书馆？（对于共享组件）。那正确吗？

我应该如何为服务和构建配置 angular.json 文件？我应该如何配置 app.module.ts 文件？

我创建了一个自定义指令来从输入框中删除空格，该指令在 Angular 版本 7 之前完全正常工作，但在 Angular 版本 9 中不起作用。

import {
    Directive,
    ElementRef,
    Output,
    EventEmitter,
} from '@angular/core';
@Directive({
    selector: '[trim]',
    host: {
        '(blur)': 'onBlur()'
    }
})
export class TrimDirective {
    @Output() ngModelChange: EventEmitter < any > = new EventEmitter();
    constructor(private element: ElementRef) {}
    onBlur() {
        (this.element.nativeElement as HTMLInputElement).value = (this.element.nativeElement as HTMLInputElement).value.trim();
        this.ngModelChange.emit((this.element.nativeElement as HTMLInputElement).value.trim());
    }
}

在模糊事件中，它应该修剪空白并更新 ngModel，但它不会更新 ngModel

以前我使用过

import { Http, Response, Headers, URLSearchParams  } from "@angular/http";

对于 API 调用

getprojectscount(city, param){
let urlSearchParams = new URLSearchParams();
  urlSearchParams.set('limit', param.limit );
  urlSearchParams.set('limitrows', param.limitrows );
  urlSearchParams.set('locality', param.locality );

return this.http
    .get(this.myapiurl + city + "?", { search: urlSearchParams })
    .pipe(map(response => response.json().Counts));

}

在此 URLSEARCHPARAMS 方法中，它运行良好。-> 因为当我们传递参数时。仅当需要时，它才会传递给 urlSearchParams 。

目前正在使用

import {  HttpErrorResponse, HttpParams } from '@angular/common/http';

AND 来到 HttpParams。当我使用这个 HTTPPARAMS 时，每次每个参数都通过 api 传递，如果它也为 null。

对于 API 调用

getprojectcount(city,param){
let params = new HttpParams();
params = params.append('limit', param.limit);
 params …

我开始使用ngx-admin模板，我想修改登录页面。不幸的是，我在项目中找不到登录组件。有什么方法可以访问登录组件

我有一个带有布尔输入参数的角度分量。根据它们是真是假，我想向主机添加一个 CSS 类。我知道我可以将整个组件包装在 div 中并使用 ngClass。但是如果我不想在模板中添加额外的 div 该怎么办？我只是希望主持人有条件地开设这些课程。那可能吗？说这是我的组件：

 export class AssetDetailsComponent {
  @Input isSomethingTrue = true;
  @Input isThisAlsoTrue = true;

  constructor() {}
}

模板如下所示：

<h1> Page heading </h2>
<p> Details </p>

isSomethingTrue现在，根据和的值isThisAlsoTrue，我想向主机应用 2 个不同的 CSS 类或样式（以添加一些顶部边距）。我如何在组件中做到这一点？

我是 angular 的新手，想动态地更改 angular 材质主题，我知道如何通过制作 scss 文件来制作不同的主题，定义 3 种颜色，包括 mat 属性和功能，但后来我在 angular 中静态添加了该文件引用.json，但如果我有很多自定义的角度材质主题，我想动态地引用 css 文件。

那么有没有简单快速且经过优化的方法来做到这一点？

PS 我已经浏览了许多帖子和文档，但是在动态更改主题时似乎很混乱，例如，如果我切换了，那么如何引用不同的样式而不是默认样式？

任何答案将不胜感激.. !!