标签: angular2-directives

问题:我希望能够在Angular 2中对指令进行单元测试,以确保它正确编译.

在Angular 1中,之后可以使用$compile(angular.element(myElement)服务和调用$scope.$digest().我特别希望能够在单元测试中执行此操作,以便在Angular最终<div my-attr-directive/>在my-attr-directive编译的代码中运行时测试.

约束:

• Angular 2使用JAVASCRIPT.有些相关的所有来源似乎都需要TS.也许这个资源确实解决了这个问题,而我对TS的理解就是那么薄弱
• 茉莉花的单元测试
• 一定不要那么hacky,我的单元测试最终会破坏.请参阅Angular 2中手动编译HTML的相关SO帖子

以下片段之间Angular 2的区别是什么:

<div [class.extra-sparkle]="isDelightful">
<div [ngClass]="{'extra-sparkle': isDelightful}">

我有一种情况,我需要在同一元素上使用*ngIf和*ngFor指令.我在stackoverlow上找到了很多答案,但在这种情况下没有找到答案.

我有一个表,我循环遍历对象数组并动态写入标题中的单元格:

 <table border="1" width="100%">
        <thead>
            <tr>
                <td *ngFor="let item of headerItems" *ngIf="item.visible">{{ item?.name }}</td>
            </tr>
        </thead>
        <tbody>
            ...
        </tbody>
    </table>

我想显示/隐藏对象是否包含可见设置为true.我怎样才能做到这一点？

我正试图检测指令中输入值何时发生变化.我有以下指令:

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

@Directive({
    selector: '[number]',
    host: {"(input)": 'onInputChange($event)'}
})

export class Number {

    constructor(private element: ElementRef, private renderer: Renderer){

    }
    onInputChange(event){
        console.log('test');
    }
}

该指令中的问题是它仅在存在输入时检测,而不是在以编程方式更改值时检测.我使用重新形式,有时我用patchValue()函数设置值.我该怎么做才能触发更改功能？

试图找出如何在Angular2中调整事件大小时获取窗口宽度.这是我的代码:

export class SideNav {

    innerWidth: number;

    constructor(private window: Window){

        let getWindow = function(){
          return window.innerWidth;
        };

        window.onresize = function() {
          this.innerWidth = getWindow();
          console.log(getWindow());
        };
} 

我在bootstrap.ts文件中全局导入窗口提供程序,使用提供从我的应用程序访问窗口.我遇到的问题是这确实给了我一个窗口大小,但是在调整窗口大小时 - 即使窗口改变大小,它也会反复重复相同的大小.请参阅console.log示例图片: 截图图片

我的总体目标是能够将窗口编号设置为变量onresize,以便我可以在模板中访问它.我在这里做错了什么想法？

谢谢!

我是新手angular,angular2特别是.我正在尝试编写一个容器组件,其中应包含子组件.

例如,容器组件:

@Component({
  selector: 'my-list',
  template: `
    <ul>
      <ng-content></ng-content>
    </ul>
  `
})
export class MyList {
}

子组件:

import { Component } from 'angular2/core'

@Component({
  selector: 'my-item',
  template: `
    <li>
      <ng-content></ng-content>
    </li>
  `
})
export class MyItem {
}

我想做这个结构:

<my-list>
    <my-item>One</my-item>
    <my-item>Two</my-item>
</my-list>

要呈现给以下一个:

<my-list>
    <ul>
        <li>One</li>
        <li>Two</li>
    </ul>
</my-list>

但相反,我有容器的主机元素和保留的项目:

<my-list>
    <ul>
        <my-item>
            <li>One</li>
        </my-item>
        <my-item>
            <li>Two</li>
        </my-item>
    </ul>
 </my-list>

Plunk可在这里找到

问题:有没有办法消除宿主元素并只留下渲染模板？

有一些类似的线程,但我找不到合适的答案满足我的需求.所以在angular2中应该严格避免直接DOM访问我只是想知道最新的做法.

我想要实现的是基于当前宽度调整元素的大小.

workitemresize.component.ts

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

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

export class WorkItemResizeDirective implements ngAfterViewInit {

  private el: HTMLElement;
  private renderer: Renderer;

  constructor(el: ElementRef, public renderer: Renderer)
  { 
    this.el = el.nativeElement; 
    this.renderer = renderer;
  }  


  @HostListener('window:resize', ['$event.target']) 
  onResize() 
  { 
    this.resizeWorks();
  }

  ngAfterViewInit() {
    this.resizeWorks();
  }

  private resizeWorks(): void {
    this.renderer.setElementStyle(this.el, 'height', this.el.width); // <-- doesn't work I kow that this.el.width doesn't exist but just for demonstration purpose
    this.renderer.setElementStyle(this.el, 'height', '500'); // <-- works …

我目前正在学习Angular 2.我了解如何使用Angular Renderer设置一个ElementStyle,但现在我想使用该Renderer方法:

setElementClass(renderElement: any, className: string, isAdd: boolean) : void

我的问题是如何将CSS类导入到我的属性指令中？我必须将我的CSS类转换为JSON吗？

如何动态添加(注入)指令到主机？

我有一个myTooltip指令,我想将mdTooltip指令添加到它的主机.我试过setAttribute()了ElementRef.nativeElement,但它没有创建mdTooltip指令.

mytooltip.directive.ts:

@Directive({
  selector: '[my-tooltip]',
  host: {
    '(mouseenter)': 'show()',
    '(mouseleave)': 'hide()',
  }
})
export class myTooltip {
  @Input('my-tooltip') message;

  constructor() { }

  show() {
    /* TODO: How to add md-tooltip directive to elementref (host)? */
  }

  hide() {
    /* TODO: remove md-tooltip directive from elementref (host) */
  }
}

通过主机我的意思是具有myTooltip指令的元素:

<span my-tooltip="tooltip hint">Click here</span>

结果不会在html之上改变,但是在mouseenter上它会有span中的md-tooltip指令.

顺便说一句,我使用包装器而不是直接使用md-tooltip的原因是我想稍后修改显示延迟,隐藏延迟并以其他方式定制材料工具提示的行为.

编辑显然目前不支持动态添加指令:(我认为这个问题仍应存在,以防材料团队更新

我知道提供者是从另一个类获得服务但是什么是多提供者和令牌的东西？

还有什么时候multi=true呢？

provide(NG_VALIDATORS, { useExisting: class),    multi: true })