标签: angular2-directives

有没有办法在 Angular 2 中使用装饰器获取所有组件或指令属性@Input？

我有一些需要在整个应用程序中使用的自定义指令。如何注册我的指令以在整个应用程序中使用？我遇到的其他问题都已经过时了。我需要 Angular 2 最终版本 2.1.0 的解决方案

我的main.ts样子是这样的

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

//enableProdMode(); //Uncomment for production
platformBrowserDynamic().bootstrapModule(AppModule)
    .then((success: any) => console.log('App bootstrapped'))
    .catch((err: any) => console.error(err));

我的应用程序有 6 个模块可以使用延迟加载

appmodule 
--contact module
--project module
--restmodules
...

当我在产品模块中注册该指令时，它运行良好。所以我在我的其余模块中使用了这个指令，我在其中注册了这个指令，appmodule.ts如下所示

import { mdinput} from './shared/mdinput.directive';


@NgModule({
    imports: [
               AppRoutingModule

    ],
    declarations: [
        AppComponent,mdinput

    ],
    providers: [DataService],
    bootstrap: [AppComponent]
})
export class AppModule {
}

现在这个特定指令不起作用。它也没有给出任何错误。

是否可以在Angular中使用多个数组用于ngFor？

   *ngFor="let device of element.devices && element.zones.devices"// something like this

export interface Element {
    id: string;
    name: string;   
    zones: Zone[];
    devices: Device[];
}

export class Zone {
    id: string;
    name: string;
    devices: Device[];
}

export class Device {
    id: string;
    name: string;
}

我将有权访问Element对象,因为我需要显示区域内的所有设备和设备.

我需要创建一个Angular 2+(我在4.x)指令(非组件),通过添加背景图像@HostBinding.我知道我很亲密,但是当我检查它时,我会看到background-image: noneChrome的检查员.

import { Directive, HostBinding } from '@angular/core';
import { DomSanitizer, SafeStyle } from '@angular/platform-browser';

@Directive({
    selector: '[myDirectiveWithBackgroundImage]'
})
export class MyDirective {

    @HostBinding('style.background-image')
    public backgroundImage: SafeStyle;

    constructor(private sanitizer: DomSanitizer) {
        this.backgroundImage = this.sanitizer.bypassSecurityTrustStyle(
            'url(assets/images/favicon16.png) no-repeat scroll 7px 7px;'
    );
  }
}

我的资产/ images/favicon.16png由webpack提供.我已经试过各种路径选项,/assets,~/assets,等...但background-image总是none

https://plnkr.co/edit/5w87jGVC7iZ7711x7qWV?p=preview

我正在尝试建立一个列表（一种您在 Facebook 上看到的通知系统）。该列表使用 JSON 获取，并由 ngFor 在 UI 上生成。我有一个默认的 css 类（来自 JSON 的未读）应用于它。我希望根据任何事件动态更改 DOM 上的该类（现在假设底部有一个按钮）。所以基本上我会生成很多 DIV，除此之外，我只需要在一些嵌套的 span 标签上更改 css 类。

我可以为跨度分配一个唯一的 ID，所以基本上我如何使用 Angular 2 定位这些跨度并更改 css 类。

关于如何去做的任何指示？我正在尝试使用 Angular 2 来实现。使用普通的 javascript 或 jquery 将是我最后的手段。

这是我的 HTML：

 <ion-row *ngFor="let m of messages">
     <ion-col col-12 >
    <div class="talk-bubble border" [ngClass]="[m.position]">
      <span class="talktext">{{m.message}}</span>     
      <span #elem [attr.id]="m.iconId" class="message-status" [ngClass]="[m.status]" ></span>
      <span class="datedisplay">{{m.date}}</span>
    </div>
     </ion-col>
  </ion-row>

建议在根AppModule提供程序数组中注册服务,并避免使用根AppComponent的提供程序数组.什么时候应该有人在根AppComponent中注册服务？任何实际的例子.与根AppComponent相比,在根AppModule中注册服务有什么好处？

有相同标签在同一级别中选择多个标签的技巧吗？

<div #el></div>
<div #el></div>
<div #el></div>

它总是给"参考"#el"定义了几次"错误信息.

提前致谢

我是angular指令的新手，所以我创建了如下指令：

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

@Directive({
  selector: "[bonusCard]"
})
export class BonusCard {
  @Input() bonus: string;
  @Input() amount: string;
  @Input() isSeleted: string;
  constructor(private el: ElementRef){
    el.nativeElement.innerHTML = this.getTemplate()
  }

  getTemplate(){
    return ''+
      '<div>'+
        '<div class="bonus">'+this.bonus+'</div>'+
        '<div class="amount">'+this.amount+'</div>'+
        '<div class="radio '+(this.isSeleted?'is_seleted':'')+'"></div>'+
      '</div>' +
      '';
  }
}

我在模板中使用此指令，如下所示：

  <div class="column col-3" *ngFor="let b of bonusJson;let i = index" bonusCard [bonus]="b.bonus" [amount]="b.amount" [isSeleted]="i==activeBonus"></div>

其中变量定义如下：

bonusJson = [{
    bonus:1500,
    amount:2000
  },{
    bonus:1000,
    amount:1000
  },{
    bonus:500,
    amount:500
  },{
    bonus:0,
    amount:100 …

调用push方法时出现错误

ng:///AppModule/ManageUser_Host.ngfactory.js:5 ERROR TypeError: Cannot read property 'push' of undefined
    at ManageUser.push../src/app/Views/user/user.component.ts.ManageUser.getUsers (main.js:7277)
    at ManageUser.push../src/app/Views/user/user.component.ts.ManageUser.ngOnInit (main.js:7271)
    at checkAndUpdateDirectiveInline (vendor.js:73109)
    at checkAndUpdateNodeInline (vendor.js:74633)
    at checkAndUpdateNode (vendor.js:74576)
    at debugCheckAndUpdateNode (vendor.js:75469)
    at debugCheckDirectivesFn (vendor.js:75410)
    at Object.eval [as updateDirectives] (ng:///AppModule/ManageUser_Host.ngfactory.js:9)
    at Object.debugUpdateDirectives [as updateDirectives] (vendor.js:75395)
    at checkAndUpdateView (vendor.js:74542)

代码如下所示：

public users: User[];

this.users.push({"UserId":2,"FirstName":"string","FullName":"string","LastName":"string","EmailAddress":"string",
        "GEID":"string",
        "RITSID":"string",
        "SOEID":"string",
        "RoleID": 1,
        "RoleName":"string",
        "IsActive":true,
        "ModifyingUserId":"string",
        "CreatedBy":"string",
        "CreatedDate":"string",
        "EmailID":"string",       
        "Name": "string",
        "Email": "string",
        "Roles":"any",
        "Manager":"string"});

    console.log(this.users);