标签: angular-directive

我知道在ng2中我们ComponentFactoryResolver可以解决我们可以申请的工厂ViewContainerRef.

但是,指令有类似之处吗？一种实例化它们并将它们应用于组件中的投影内容的方法？

我正在尝试使用指令创建自定义验证器，但出现以下错误。

ERROR in ./src/app/CustomValidators/white-space-validator.directive.ts
Module not found: Error: Can't resolve '@angular/forms/src/validators' in 'D:\Angular\Admin\src\app\CustomValidators'
resolve '@angular/forms/src/validators' in 'D:\Angular\Admin\src\app\CustomValidators'
  Parsed request is a module
  using description file: D:\Angular\Admin\package.json (relative path: ./src/app/CustomValidators)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: D:\Angular\Admin\package.json (relative path: ./src/app/CustomValidators)
    resolve as module.....

指令文件中的代码：

import { Directive } from '@angular/core';
import { ValidatorFn, Validator } from '@angular/forms/src/directives/validators';
import { AbstractControl, FormControl } from '@angular/forms/src/model';
import { NG_VALIDATORS } from '@angular/forms/src/validators';

@Directive({
  selector: '[whiteSpace][ngModel]',
  providers: [ …

在 AngularJS 中，您可以使用指令设置输入以延迟验证

link(scope, elem, attr, ngModel) {
    ngModel.$overrideModelOptions({
        updateOn: 'default blur',
        debounce: {
            blur: 0,
            default: 500,
        },
    });
}

它的作用是：当输入更改时，在输入从有效/无效验证之前给出 500 毫秒的延迟。

在 Angular2+ 中，这似乎更困难。我想我可以用 observable 来监听更改并以这种方式更新验证，但是我如何告诉初始输入不验证？

我有一个使用内容投影的组件。

<ng-content select="button">
</ng-content>

我想在我的组件中做这样的事情：

@ContentChild('button') button: ElementRef;

但是，当我检查时this.button，它undefined同时在ngAfterViewInit和 中ngAfterContentInit。

如果我的内容子元素是原生元素而不是自定义组件，我该如何选择它？

我有一个滑块，其中是动态创建的项目 - 这些是子组件。

滑块的 ng-container 父模板：

<div id="slider-wrapper">
    <ng-container appSliderForm *ngFor="let question of questionsInSlider"
                          [questionTest]="question" (onRemove)="removeQuestion($event)">
    </ng-container>
</div>

这些子组件由 appSliderForm 指令创建：

@Directive({
  selector: '[appSliderForm]'
})
export class FormSliderDirective implements OnInit {

  @Input()
  questionTest: QuestionInSlider;

  constructor(private resolver: ComponentFactoryResolver, private container: ViewContainerRef) {}

  ngOnInit(): void {
    const factory = this.resolver.resolveComponentFactory<TestQuestionInSliderComponent>(TestQuestionInSliderComponent);
    const component = this.container.createComponent(factory);
    component.instance.questionTest = this.questionTest;
    component.instance.ref = component;
  }

}

在我的子组件中，我有一个删除功能，用于将自身从滑块中删除。

@Component({
  selector: 'app-test-question-in-slider',
  templateUrl: './test-question-in-slider.component.html',
  styleUrls: ['./test-question-in-slider.component.less']
})
export class TestQuestionInSliderComponent {

  questionTest: QuestionInSlider;

  ref: any;

  @Output() …

我正在尝试将 a 传递ng-template给我的指令，如下所示：

组件.html

<div myDirective [myTemplate]="myTemplate"></div>
<ng-template #myTemplate><p>Lorem ipsum dolor sit amet.</p></ng-template> 

指令.ts

import {Directive, Input} from "@angular/core"

@Directive({
  selector: "[myDirective]"
})
export class MyDirective {
  @Input() myTemplate

  ngOnInit () {
    console.log(this.myTemplate.elementRef.nativeElement)
  }
}

但这只是表明<!-- -->。如何访问模板的内容？其他属性似乎都没有它 - 关于这个问题的评论建议使用templateRef它，但它是未定义的。

如果需要的话，进行堆栈闪电战。

澄清一下，该指令的最终目标是有条件地将模板的内容添加到其父元素（以及一些其他更改）。

我对 Angular 中的指令和装饰器很困惑。我认为任何以 @ 为前缀的东西都是装饰器，现在当我读到指令时它说，组件是指令。这是怎么回事？对此事的任何澄清都会有所帮助。

我尝试使用 HostListener 跟踪滚动位置以更改标题的颜色。

我的标题组件如下，

import { Component, OnInit, Input, HostListener, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {

constructor(@Inject(DOCUMENT) private document: Document) { }

  ngOnInit() {
  }

  @HostListener('window:scroll', [])
  onWindowScroll() {
    console.log(window.scrollY);
  }

}

但是当我滚动时，我没有在控制台中收到任何日志。

我尝试将 HostListener 放在主 app.component 中，因为我的头组件正在定位，但是我仍然没有得到任何结果，也没有错误。

谢谢

ReactiveFormsModule这不是导入或导入的问题FormsModule

我已经在 app.module.ts 和遇到此问题的模块中导入了这些内容：

  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    ...

所以当我将属性[formGroup]和formControlName属性添加到.html file

<form  [formGroup]="loginForm" (ngSubmit)="doLogin()" class="m-t" role="form" action="index.html">
  <div class="form-group">
    <input type="email" class="form-control" formControlName="username" placeholder="Username" required="">
  </div>
  <div class="form-group">
    <input type="password" class="form-control" formControlName="password" placeholder="Password" required="">
  </div>
</form>

当我将 CLI 从 升级12.1.0到13.0.4

如果我降级到以前的版本，错误就会消失。

我已删除节点模块文件夹并重新运行npm install

由于此版本的 CLI 已于7 天前发布，因此我找不到此错误的任何解决方案。我还访问了Github 上的Angular cli 问题页面，但那里尚未提出任何问题。

如果有任何解决此问题的建议，我将不胜感激。降级不是一个选择。

该imports属性在装饰器上可用@Component，但在@Directive装饰器上不可用。

还有另一种方法可以将模块导入到独立指令中吗？