标签: angular2-directives

我试图在使用EventEmitter的组件使用的指令中触发事件.

零件:

@Component({
    selector: 'messages',
    templateUrl: 'static/pages/messages/messages.component.html',
    directives: [AutoScroll],
    events: ['update'],
    providers: [
        HTTP_PROVIDERS,
        RoomService,
    ],
    styleUrls: ['../static/css/messages.component.css', '../static/css/app.component.css']
})

export class MessagesComponent {

    public selectedRoom: Room = <Room>{};

    @Output()
    public update: EventEmitter;

    constructor (private _roomService: RoomService) {
        this.update = new EventEmitter();
    }

    public postMessage (msg) {

        this.update.next({});

        this._roomService.postMessage(msg)
            .subscribe(res => {
                this.selectedRoom.messages.push(res);
            });
    }
}

HTML模板:

<auto-scroll class="chat-messages" (update)="onUpdate($event)">
    <div class="chat-message" *ngFor="#message of selectedRoom.messages">
        <div class="message-content">
            {{ message.text }}
        </div>
    </div>
</auto-scroll>

指示:

@Directive({
    selector: 'auto-scroll',
    template: '<div></div>'
}) …

我正在尝试编写一个Angular2属性指令来修改某些元素的行为.更具体地说,我想将属性应用于具有单击处理程序的某些元素,并防止在特定条件下执行绑定函数.

所以现在我有一个元素,例如:

<button (click)="onClick(param1, param2)"></button>

onClick是在承载按钮元素的组件上声明的函数.

我想做的是写一些类似的东西:

<button (click)="onClick(param1, param2)" online-only></button>

并有一个指令,如:

@Directive({
  selector: '[online-only]',
})
export class OnlineOnlyDirective {
  @HostListener('click', ['$event']) 
  onClick(e) {
    if(someCondition){
      e.preventDefault();
      e.stopPropagation();
    }
  }
}

但是首先执行click handler,因此不会给我的指令停止执行.

我想到的第二种方法是用我自己的处理程序替换(单击)例如([onlineClick] ="onClick")并在指令认为合适时执行传递的函数,但这样我就无法将params传递给onClick函数并且有点我们要看看.

做这样的事情你有什么想法吗？

正如在这个plunker中所看到的,我正在动态地向我的一个元素添加一个HTML,其归结为:

@Component({
    selector: 'my-comp',
    template: `<span [innerHTML]="link"></span>`,
}) export class MyComponent {
    private linkContent = '<a routerLink="/my-route">GoTo Route</a>';
    private link;

    constructor(sanitizer: DomSanitizer) {
        this.link = sanitizer.bypassSecurityTrustHtml(linkContent);
    }
}

这导致<a routerLink="/my-route">GoTo Route</a>被添加到DOM中,但Angular routerLink对该元素的指令一无所知,也没有"绑定"它.因此,当您单击该链接时,它会导致完全重新加载并重新引导(在plunk中不起作用,它只给出404).

问题:如何告诉角度通过DOM(或其部分,甚至是单个元素)并在需要时执行组件初始化？

我正试图在Angular2指令中听我的鼠标的X位置,如下所示:

@HostListener('mousemove', ['$event'])
onMousemove(event: Event): void  { 
  console.log(event.clientX)
}

但我得到了错误

属性'clientX'在'Event'类型中不存在.

这很奇怪,因为这个听众

@HostListener('mousemove', ['$event'])
onMousemove(event: Event): void  { 
  console.log(event)
}

注销一个事件对象

为什么我无法访问event.clientX？

我正在寻找许多论坛和问题,但似乎没有人问如何双击ou双击Angular/ionic 2？

在离子v1中可以使用on-double-tap(参见http://ionicframework.com/docs/api/directive/onDoubleTap/)

有没有人可能有一个提示或任何代码来捕捉离子2 /角度2上的双击事件？

也许通过HammerJS？

非常感谢你 !路易斯:)

我正在创建一个DOM结构,并且只想在第一时间在某些可视组件中添加一些部分,并且不希望它们一次又一次地刷新,这就是*ngIf的工作方式.这是为了避免绑定一次又一次地执行我知道一旦创建就永远不会改变的事情.换句话说,Angular1具有::帮助实现此目的的运算符.

*ngIfAngular2中是否有一次性绑定？如果在其他问题中讨论过,请指出我的问题.

我有一个名为EasyBoxComponent的组件,以及一个带有此viewchild的指令

@ViewChild(EasyBoxComponent) myComponent: EasyBoxComponent;

this.myComponent总是未定义的

我认为这是正确的语法..

我的HTML是

<my-easybox></my-easybox>
<p myEasyBox data-href="URL">My Directive</p>

import { Directive, AfterViewInit, HostListener, ContentChild } from '@angular/core';
import { EasyBoxComponent } from '../_components/easybox.component';

@Directive({
    selector: '[myEasyBox]'
})
export class EasyBoxDirective implements AfterViewInit {

    @ContentChild(EasyBoxComponent) myComponent: EasyBoxComponent;
    @ContentChild(EasyBoxComponent) allMyCustomDirectives;

    constructor() {
    }

    ngAfterViewInit() {
        console.log('ViewChild');
        console.log(this.myComponent);
    }

    @HostListener('click', ['$event'])
    onClick(e) {
        console.log(e);
        console.log(e.altKey);
        console.log(this.myComponent);
        console.log(this.allMyCustomDirectives);
    }

}

我们正在构建一个角度4组件库,其中一个组件是一个Busy组件.该组件的目的是允许开发人员在包含微调器图形的任何给定HTML元素上创建叠加层.

<div *xuiBusy="isBusy">...</div>

当值为isBusytrue时,我们想要附加到内部内容,div以便我们可以在内容的顶部显示叠加元素.

我们已经能够将组件附加到,ViewContainerRef但是这会将busy元素作为兄弟插入div而不是div根据需要插入.

    ngOnInit(): void {
      const compFactory = this._componentFactory.resolveComponentFactory(XuiBusyComponent);
      const comp = this._viewContainer.createComponent(compFactory);

消费者做了什么:

<div *xuiBusy="isBusy">
  <span>This is the content</span>
</div>

当isBusy设置为true时,我们想要改变市场看起来像这样.请注意,<spinner>已添加到div元素中.

<div *xuiBusy="isBusy">
  <span>This is the content</span>
  <spinner>Please wait...</spinner> <-- inserted by directive
</div>

任何建议表示赞赏!

我将Angular从4升级到6,因此我的点击政策出现问题,它停止了所有组件的工作.

我的指示:

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

@Directive({
  selector: '[clickOutside]'
})
export class ClickOutsideDirective {

  constructor(private _elementRef : ElementRef) { }

  @Output()
  public clickOutside = new EventEmitter();

  @HostListener('document:click', ['$event.target'])
  public onClick(targetElement) {
      const clickedInside = this._elementRef.nativeElement.contains(targetElement);
      if (!clickedInside) {
          this.clickOutside.emit(null);
      }
  }
}

我的component.html使用了这个指令:

<div id="sidenav" *ngIf="this.opened" class="sidenav" [ngClass]="getClasses()" [ngStyle]="getStyles()" clickOutside (clickOutside)="closeOutsideSidenav()">
  <header> {{ navTitle }} </header>
  <i *ngIf="this.showCloseButton" class="iconic iconic-x-thin close-icon" (click)="closeSidenav()"></i>
  <ng-content></ng-content>
</div>
<div *ngIf="this.backdrop && this.opened" class="sidenav-backdrop"></div>

我正在使用第三方库将小部件渲染到屏幕上(Okta的SignInWidget).窗口小部件的呈现方式如下:

this.oktaSignInWidget.renderEl(
    { el: '#widget-container' },
    () => {},
    err => {
      console.error(err);
    }
  );

我最初的想法是把它放到一个指令中,但即使有指令你也应该让Renderer2进行渲染.这里有最好的做法吗？