标签: angular-components

我有一个角度4的组件,被称为三次.在模板元数据中,我有一个带有指令的div,带有一些这样的绑定.

@import {gServ} from '../gServ.service';

@Component: ({
   selector: 'sr-comp',
   template: `<div gDirective [cOptions]="dataChart">`
})

export class SGComponent implements OnInit {
    @Input('report') public report: IReportInstance;
    cOptions:any;

    constructor(private gServ: gServ) {
    }

    ngOnInit(){

        this.cOptions = {};
        this.cOptions = this.gServ.objectMerge(this.gServ.defaultOpt, this.report.opt);

        //this.report.opt is binded to a component when is instantiated.
        //this.gServ.objectMerge is a function that merge the two objects
    }
}

this.cOptions改变了组件的每个实例,然后在指令中我有这个:

import { Directive, ElementRef, HostListener, Input, OnInit } from '@angular/core';

@Directive({
  selector: '[gDirective]'
})
export class SGDirective implements OnInit {
  public …

使用 ASP.NET 核心项目（Angular）和 Visual Studio 作为我的 IDE。

有没有一种简单的方法来生成 Angular 组件文件并在 Visual Studio 的应用程序模块中注册新组件？

我试图在角度文档中显示一个类似(不完全)的动态组件.

我有一个带有viewContainerRef的动态指令

@Directive({
   selector: '[dynamicComponent]'
})
export class DynamicComponentDirective {
   constructor(public viewContainerRef: ViewContainerRef) { }
}

摘自组件代码

@ViewChild(DynamicComponentDirective) adHost: DynamicComponentDirective;
..
ngAfterViewInit() {
let componentFactory = null;
                console.log(component);
                componentFactory = this.componentFactoryResolver.resolveComponentFactory(component);
                // this.adHost.viewContainerRef.clear();
                const viewContainerRef = this.adHost.viewContainerRef;
                viewContainerRef.createComponent(componentFactory);
}

最后<ng-template dynamicComponent></ng-template>在模板中添加

我正在尝试通过实现 MatFormFieldControl、ControlValueAccessor 和 Validator 接口来创建自定义表单控件。

但是，当我提供NG_VALUE_ACCESSOR或NG_VALIDATORS...

@Component({
  selector: 'fe-phone-number-input',
  templateUrl: './phone-number-input.component.html',
  styleUrls: ['./phone-number-input.component.scss'],
  providers: [
    {
      provide: MatFormFieldControl,
      useExisting: forwardRef(() => PhoneNumberInputComponent)
    },
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => PhoneNumberInputComponent),
      multi: true,
    },
    {
      provide: NG_VALIDATORS,
      useExisting: forwardRef(() => PhoneNumberInputComponent),
      multi: true
    }
  ]
})
export class PhoneNumberInputComponent implements MatFormFieldControl<string>,
  ControlValueAccessor, Validator, OnDestroy {
  ...
}

创建循环依赖：

未捕获的错误：模板解析错误：无法实例化循环依赖！控件

这有效：

@Component({
  selector: 'fe-phone-number-input',
  templateUrl: './phone-number-input.component.html',
  styleUrls: ['./phone-number-input.component.scss'],
  providers: [
    {
      provide: MatFormFieldControl,
      useExisting: forwardRef(() => PhoneNumberInputComponent)
    } …

我有一个组件单元测试，它没有按照我预期的方式处理来自模拟的承诺拒绝。

我在一个组件上有这个函数，它发送一些数据addUserToOrganisation并处理它返回的 Promise：

 public onSubmit() {
    this.saveStatus = 'Saving';
    this.user = this.prepareSaveUser();
    this._userService.addUserToOrganisation(this.user)
    .then(() => this._router.navigate(['/profile']))
    .catch(error => this.reportError(error));
  }

在测试此组件时，我提供了一个模拟，用于UserService监视端点addUserToOrganisation并返回某种 Promise：

 mockUserService = jasmine.createSpyObj('mockUserService', ['getOrgId', 'addUserToOrganisation']);
 mockUserService.getOrgId.and.returnValue(Promise.resolve('an id'));
 mockUserService.addUserToOrganisation.and.returnValue(Promise.resolve());

这对于快乐的路径（解决）来说效果很好 - 我可以测试它this._router.navigate()被调用等等。这是这条快乐路径的通过测试：

it('should navigate to /profile if save is successful', fakeAsync(() => {
    fixture.detectChanges();
    tick();
    fixture.detectChanges();

    component.userForm.controls['firstName'].setValue('John');
    component.userForm.controls['lastName'].setValue('Doe');
    component.userForm.controls['email'].setValue('j.d@gmail.com');
    component.onSubmit();

    tick();
    fixture.detectChanges();
    expect(mockRouter.navigate).toHaveBeenCalledWith(['/profile']);
  }));

然而，我在测试“悲伤”路径时遇到了麻烦。我改变我的模拟以返回 a Promise.reject，尽管我有.catchin onSubmit，但我收到此错误：

Error: Uncaught (in promise): no

所以这很令人困惑。这是我对这条悲伤之路的测试。请注意，我更改了模拟调用的响应。

it('should show Failed …

我正在尝试从另一个组件执行一个函数（这两个组件不是兄弟组件）。我的猜测是，我需要使用@Output 和 eventEmitter来完成此任务，或者创建一个Service并订阅Observable以在所有组件中共享相同的数据（我知道如何传递消息（字符串），但我不知道）知道如何执行函数）。我不太确定从哪里开始。我正在尝试从function2执行function1。谁能帮助我如何让它发挥作用？请提供一个plunker。这就是我的项目的样子：

   src
   |__app(FOLDER)
      |__home(FOLDER)
      |     |
      |     |__home.component.ts 
      |                  |______function2(){
      |                          What do I need to put in here to execute function1?
      |                          }
      | 
      |__products(FOLDER) 
           |
           |__tools(FOLDER)
                  |
                  |____tools.component.ts
                                   |____function1(){
                                         alert("I'm inside function 1!!");
                                         }