标签: angular2-directives

我在视图中有三个按钮,在页面加载时我显示第一个按钮内容.单击按钮后,该按钮将变为活动状态,但在页面加载时,初始按钮不会设置为活动状态.为了显示第一个按钮激活,我将其添加到div:

[ngClass]="'active'" 

现在的问题是,当单击另一个按钮时,第一个按钮保持活动类.我正在评估基于字符串显示的数据.点击每个按钮后,字符串会发生变化.

如何添加条件来检查当前字符串？因此,如果字符串与显示的当前数据匹配,那么将活动类添加到此按钮？

所以这就是我要找的东西:

[ngClass]="'active'" if "myString == ThisIsActiveString;

这是我当前的按钮,但是当我用这种语法添加它时,不会添加该类:

 <button  [class.active]="shown == EQUIFAX" (click)="shown = 'EQUIFAX'" type="button" id="equifax" class="btn btn-secondary">Equifax Report </button>

要清楚,字符串在页面加载时默认为"EQUIFAX".

这基于答案:

 <button [ngClass]="'active' : shown == 'EQUIFAX'" (click)="shown = 'EQUIFAX'" type="button" id="equifax" class="btn btn-secondary">Equifax Report </button>

我有这个我通过Id引用的元素:

    let infiniteScrollElement = document.getElementById('th-infinite-scroll-tracker');

当浏览器到达元素的底部时我需要监听.

怎么做到这一点？

我需要在Angular2中构建一个readmore指令.该指令将用于折叠并使用"Read more"和"Close"链接扩展长文本块.不是基于字符数,而是基于指定的最大高度.

<div read-more [maxHeight]="250px" [innerHTML]="item.details">
</div>

任何人都可以指导什么是最可靠的方法来获得/设置这种特定情况下的元素的高度.

关于如何实施这一具体指令的任何指导方针也将受到高度赞赏.

我需要构建类似这样的https://github.com/jedfoster/Readmore.js

解:

在Andzhik的帮助下,我能够构建满足我要求的以下组件.

import { Component, Input, ElementRef, AfterViewInit } from '@angular/core';

@Component({
    selector: 'read-more',
    template: `
        <div [innerHTML]="text" [class.collapsed]="isCollapsed" [style.height]="isCollapsed ? maxHeight+'px' : 'auto'">
        </div>
            <a *ngIf="isCollapsable" (click)="isCollapsed =! isCollapsed">Read {{isCollapsed? 'more':'less'}}</a>
    `,
    styles: [`
        div.collapsed {
            overflow: hidden;
        }
    `]
})
export class ReadMoreComponent implements AfterViewInit {

    //the text that need to be put in the container
    @Input() text: string;

    //maximum height of the container
    @Input() maxHeight: number …

检查用户是否在没有jQuery的情况下滚动到Angular2页面底部的最佳做法是什么？我是否可以访问我的应用程序组件中的窗口？如果不是我应该检查滚动到页脚组件的底部,我该怎么做？关于页脚组件的指令？有没有人完成这个？

我有时会有一个可以接收这样的文本的组件:

文本www.website.com

但是如果它是一个链接我想将它转换为url.像这样.

文本www.website.com

我读了这个SO答案,建议使用第三方库,例如anchorme.有没有办法以angular2方式做到这一点？

Renderer 和之间有什么区别ElementRef？在Angular中,两者都用于DOM操作.我目前正在ElementRef单独使用它来编写Angular 2指令.如果我获得更多信息Renderer,我可以在我未来的指令中使用它.

如何this.firms在数据中调用forEach()？

我知道如何在Angular1中执行此操作,但不知道我在Angular 2中的当前项目.

目前它在forEach之外工作正常,但不在内部.

 console.log(this.firms[0].name); // works
    var a = 0;
        console.log("--------------");

    data.forEach(function (eachObj) {
      console.log("firms check!");
      console.log(this.firms); // not working
      a = a + eachObj.income; 
      eachObj.name = this.firms[data.firmid - 1].name; // wont work
    });

错误:

Cannot read property 'firms' of undefined

我正在尝试在我的应用程序中使用JavaScript和Angular 2实现"Anchor Jumping"功能,意味着用户可以跳过页面内的部分.

根据客户要求,用户可以使用按Ctrl + Shift +向左/向右箭头键跳转(导航)该部分.

在这里,我添加一个快照以清除问题,如下所示.

例如,假设首次关注菜单,用户按下Ctrl + Shift +右箭头,此时焦点应转到下一个元素项(即面包屑部分或任何部分).

我很困惑,如何管理动态加载内容？(我如何在我的部分中计算这个动态内容？)

请建议任何想法来实现此功能.

我有一个翻译管道,它接受一个字符串作为键,并从字典中返回翻译的字符串.管道看起来像这样:

import {Pipe, PipeTransform} from 'angular2/core';
import {TranslateService} from './translate.service';

@Pipe({
    name: 'translate',
    pure: false
})
export class TranslatePipe implements PipeTransform {

    constructor(private _translateService : TranslateService) {
    }
    transform(key: string): any {
        var translatedText = this._translateService.resources[key];
        if (translatedText)
            return translatedText;
        return key;
    }
}

我在我的模板中使用管道,如下所示:

<div>{{'login_EnterNewPassword'|translate}}</div>

哪个将在我的HTML中呈现如下:

<div>Please enter a new password</div>

到现在为止还挺好!

TranslatePipe依赖于TranslateService,它包含一个名为resources的字典,其中包含当前语言的翻译.TranslateService的资源加载了对服务器的ajax http调用,如果用户选择其他语言,它可以在后台重新加载.

因为我需要我的UI在发生这种情况时更新所有文本,所以我将管道的pure属性设置为false.

一切都很完美,但事实是,管道经常被执行,因为它是不纯的.如果用户输入10个字符的密码,则每次按键和键入时都会开始更改跟踪,并且对于页面上所有不同的翻译文本,管道将被执行几次.

主要问题是:这是一件坏事吗,它对整体表现有多大的负面影响???

或者是否有另一种强制角度来重新评估所有需求的方法,例如只有当语言改变时？

我是Angular2的新建筑指令.我想要的是创建一个弹出指令,将一些css类包装内容.

内容

内容可以是纯文本和标题,如:

<div class="data">
    <h2>Header</h2>
    Content to be placed here.
</div>

然后我想给它一个指令属性,如:popup

<div class="data" popup>
    <h2>Header</h2>
    Content to be placed here.
</div>

该指令应该做的是将div包装在里面,让我们说:

<div class="some class">
    <div class="some other class">
        <div class="data">
            <h2>Header</h2>
            Content to be placed here.
        </div>
    </div>
</div>

我到目前为止描述的情况,这是一个属性或结构指令.

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

@Directive({
  selector: `[popup]`
})

export class PopupDirective {


}