标签: angular2-directives

我正在尝试创建一个流体文本区域，但在使用“角度 2 方式”进行 DOM 操作时，无法在元素上设置高度。

成分：

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

@Directive({
  selector: '[fluidHeight]',
  host: {
    '(input)': 'setHeight()'
  }
})

export class FluidHeightDirective {

  constructor(private _elementRef: ElementRef) {}

  @HostBinding('style.height.px')
  height: number;

  setHeight() {
    this.height = this._elementRef.nativeElement.scrollHeight + 'px';
  }
}

标记：

<textarea [(ngModel)]="model" fluidHeight></textarea>

为什么我在setHeight函数中得到了正确的值，但高度没有在 上设置textarea？

我是 Angular 2 的新手，希望得到社区的帮助。我目前正在尝试在<tr>我的 html 视图的元素中实现 ngClass 的动态/条件实现。使用的 trufy 是一个变量，其原始值来自我的 Componenet 上设置的 JSON 对象：

<td [ngClass] = "{weak : {{jsonInMyComponenet.element}}, neutral : !{{jsonInMyComponenet.element}}}"  ></td>

当我使用上面的代码时，出现此错误：

得到了预期表达式的插值 ({{}})

如果我删除大括号，我不会出错，但页面不会呈现元素，所以我看不到弱或中性的类实现。我做错了什么？

如何在组件渲染后从指令调用函数？

我有组件:

export class Component {
  ngAfterContentInit() {
  // How can i call functionFromDirective()?
  }
}

我想要调用这个函数:

export class Directive {

functionFromDirective() {
//something hapenns
}

我怎样才能做到这一点？

该组件使用材料图标。

现在我正在尝试使用 karma（通过 angular cli/webpack）学习单元测试，并且我已经弄清楚了大部分配置来创建组件，但我正在努力理解如何配置材质图标。

这是我迄今为止创建的内容：

/* config */
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement, NO_ERRORS_SCHEMA } from '@angular/core';
import { TickerDirective } from '../../directives/ticker.directive';
import { MdIconModule, MaterialModule } from '@angular/material';
import { MdIconRegistry } from '@angular/material/icon';

/* my stuff */
import { FoodListComponent } from './food-list.component';
import { FoodDataService } from '../../services/food-items/food-data.service';
import { FoodItem } from '../../diet/food-item';
import { WorkingData } from '../../services/working-data/working-data';
import { WorkingDataService …

我一直在尝试在 Angular2 中创建打字机效果。

我的问题基本上是什么是最好的方法。我能够做到这一点的唯一方法是通过 CSS 动画。这还没有给我想要的结果。到目前为止，我已经尝试了三种方法。

CSS 方法

创建了一个带有单独样式表的组件。

@import url(http://fonts.googleapis.com/css?family=Anonymous+Pro);

.typewriter h2 {
    margin: 0 auto;
    border-right: .15em solid white;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(-50%);
    animation: typewriter 2.5s steps(28) 1s 1 normal both,
             blinkTextCursor 500ms steps(28) infinite normal;
}

@keyframes typewriter{
  from { width: 0 }
  to { width: 100% }
}

@keyframes blinkTextCursor{
  from{border-right-color: rgba(255,255,255,.75);}
  to{border-right-color: transparent;}
}

#typewriterbox {
  display: inline-block;
}

接下来是将在其中添加组件的 HTML。

<div class="page-title">
    <animated-typing>CSS Typewriter effect</animated-typing>
</div>

和组件文件：

import {Component} from …

我的应用程序中有一些指令仅在某些组件中加载。目前与这些指令相关的所有样式都在 style.css 中全局定义。

有没有一种方法可以像我们在组件中所做的那样，为指令挂钩单独的样式 URL，而不是全局添加这些样式。

例如

@Directive ({
    selector: '[foobar]',
    styleUrls: [
       'foobar.directive.css'
    ]
})

所以我appGetCurrency在这里有一个属性指令:

<md-select appGetCurrency [(ngModel)]="value" placeholder="Currency" name="currency">
  <md-option *ngFor="let c of currencyList" [value]="c.code">{{c.dsc}}</md-option>
</md-select>

我希望该appGetCurrency指令将一些值传递给它currencyList以构建选项列表.

编辑

该appGetCurrency指令只是获取服务中的货币列表,然后我想将该列表传递给currencyList主机模板中的变量:

@Directive({ selector: '[appGetCurrency]' })

export class CurrencyDirective {
  currencies;

  constructor() {
    // build the <md-options> based on 'currencies' 
    this.currencies = this.service.getCurrencies('asia'); 
  }

}

我有一个指令，我定义了一个单选按钮，我想调用一个组件的方法..当我在构造函数中注入组件时，我收到了这个错误： ERROR Error: No provider for FoldersComponent!

指令.ts

   import { FoldersComponent } from '../folders/folders.component';
import { Directive, ElementRef, HostListener, Input, AfterViewInit, ViewChild, EventEmitter, Output } from '@angular/core';

declare var jQuery: any;

@Directive({
  selector: '[icheck]'
})

export class IcheckDirective implements AfterViewInit {

  @Output('icheck')
  callComponentFunction: EventEmitter<any> = new EventEmitter<any>();
  constructor(private el: ElementRef, private parentCmp: FoldersComponent) {
    jQuery(this.el.nativeElement).iCheck({
      checkboxClass: 'icheckbox_square-aero',
      radioClass: 'iradio_square-aero'
    }).on('ifChecked', function(event) {
      if (jQuery('input').attr('type') === 'radio') {
        this.parentCmp.selectType();
      }
    });
  }

  ngAfterViewInit(): void {
  }
}

文件夹.component.ts

@Component({
  selector: 'app-folders', …

我想实现自动完成功能，所以我发现一个相同的选项是使用多选下拉菜单。所以我使用了这个模块 -

https://www.npmjs.com/package/ng-multiselect-dropdown

但是在同样实施之后，我收到了这些错误 -

错误 -

ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'placeholder' since it isn't a known property of 'ng- 
 multiselect-dropdown'.
1. If 'placeholder' is an Angular directive, then add 'CommonModule' 
 to the '@NgModule.imports' of this component.
2. To allow any property add 'NO_ERRORS_SCHEMA' to the 
'@NgModule.schemas' of this component. ("

<ng-multiselect-dropdown
[ERROR ->][placeholder]="'custom placeholder'"
  [data]="dropdownList"
  [(ngModel)]="selectedItems"
"): ng:///AdminLayoutModule/HierarchySearchComponent.html@7:0

当我在我的 component.html 中评论占位符时，我收到此错误 -

Can't bind to 'data' since it isn't a known …

我对 ngSwitch 指令有点困惑——它是“属性指令”还是“结构指令”。

属性指令用 '方括号编写如 [ngStyle]、[ngClass] 等（我们将其写为 [ngSwitch]，将其称为“属性指令”）。

<div [ngSwitch]="colorValue">
    <p *ngSwitchCase="red">Red</p>
    <p *ngSwitchCase="blue">Blue</p>
    <p *ngSwitchCase="green">Green</p>
</div>