标签: angular2-hostbinding

使用@HostListener挂钩,但确认对话框(询问:你想离开这个页面？...还是你想重新加载这个页面？)没有显示.

代码有效,但确认对话框未显示.

在这里我有:

@HostListener('window:beforeunload', ['$event'])
public doSomething($event) {
    console.log("do I see this?") // <---- this logs to the console.

    return "something else";
}

但我没有看到这个:

我创建了img-pop组件,它具有@Input()绑定属性src.我创建了authSrc指令,它具有@HostBinding()属性src.

@Component({
selector: 'img-pop',

template: `<img [src]="src"/>
            <div *ngIf="isShow">
                 <----extra value----->
            </div>`
})

export class ImgPopOverComponent implements OnInit {

@Input()
private src;

private isShow=false;

@HostListener('mouseenter') onMouseEnter() {
    this.isShow= true;
}

@HostListener('mouseleave') onMouseLeave() {
    this.isShow= false;
}

}

我有这样的指示.

@Directive({ selector: '[authSrc]' })
export class AuthSrcDirective implements OnInit {

@HostBinding()
private src: string;

constructor(private element: ElementRef) { }

ngOnInit() { }

  @Input()
  set authSrc(src) {
   this.src = src+"?access_token=<-token->";
  }
}

我希望将两种功能结合在一起.

<img-pop [authSrc]="/api/url/to/image"></img-pop>

所以最终的url调用将是/ api/url/to/image？access_token = < …

题:

是否可以以@HostBinding这种方式在主机元素上添加,删除或切换类而不删除预先存在的类,特别是在需要动态切换类时？

例如,这将添加light类并且对前面的类light没有破坏性;但是,不能是动态的.

想象一下这个渲染的dom节点:

<div [classToggler] class="someClasses1 someClasses2' ></div>

有了这个控制器:

@HostBinding('class.light') isLight = theme === 'light';  // true
ngOnInit() {
  this.store.select('classToggler').subscribe((className) => {
      this.theme = className || 'light'
  });

}

作为这个示例控制器,将动态添加light类,但据我所知,将删除host元素上的其他类.

@HostBinding('class') theme;

ngOnInit() {
  this.store.select('classToggler').subscribe((className) => {
      this.theme = className || 'light'
  });
}

最后,第二个示例将重新呈现dom元素,如下所示:

<div [classToggler] class="light'></div>

因此,删除以前的类,这是不希望的.关于如何充分利用这两个世界的任何想法？

我只是尝试用角度4制作动画,我看到了在组件中使用主机的教程

import { Component, OnInit, HostBinding } from '@angular/core';
import { AngularFire, AuthProviders, AuthMethods } from 'angularfire2';
import { Router } from '@angular/router';
 import { moveIn } from '../router.animations';

@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css'],
animations: [moveIn()],
host: {'[@moveIn]': ''}
})

但它显示我在主机属性"[tslint]使用@hostBindings和@HostListeners而不是主机属性"下的错误

我正在尝试在Angular 2中实现一个自定义指令,用于移动任意HTML元素.到目前为止一切正常,但我现在不知道如何在点击它并想要开始移动时获取HTML元素的初始位置.我结合top和left风格与这两个主机绑定我的HTML元素:

/** current Y position of the native element. */
@HostBinding('style.top.px') public positionTop: number;

/** current X position of the native element. */
@HostBinding('style.left.px') protected positionLeft: number;

问题在于它们都undefined处于起步阶段.我只能更新也会更新HTML元素的值,但我无法读取它？那是假设那样吗？如果是,我有什么替代方法来检索HTML元素的当前位置.

你们知道如何使用@HostBinding装饰器在组件中批量注入样式声明吗？我在想的是:

@HostBinding('style')
get style(): CSSStyleDeclaration {
  return {
    background: 'red',
    color: 'lime'
  } as CSSStyleDeclaration;
}

在我的理解中,这应该为组件注入背景和颜色样式,但它不...

我可以像这样控制各个样式声明:

@HostBinding('style.background') private background = 'red';

但我想为所有人做这件事,请帮助:P

这是完整的代码:

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello world!</h2>
    </div>
  `,
})
export class App {

  // This works
  @HostBinding('style.color') private color = 'lime';

  /* This does not work
  @HostBinding('style')
  get style(): CSSStyleDeclaration {
    return {
      background: 'red'
    } as CSSStyleDeclaration;
  }
  */

  constructor() {}
}

和一个工作的plunker:https://plnkr.co/edit/CVglAPAMIsdQjsqHU4Fb ？ p = preview

闪烁快要了我的命，在阅读了所有 jQuery 相关线程和mdn 后，我仍然无法弄清楚。

所以我有这个 @Directive 用于显示工具提示，这就是我将其绑定到元素的方式：

  @HostListener('mouseenter', ['$event']) onEnter( e: MouseEvent ) {
    this.showTooltip(e);
  }

  @HostListener('mouseleave', ['$event']) onLeave( e: MouseEvent ) {
    this.hideTooltip(e);
  }

  @HostListener('click', ['$event']) onClick( e: MouseEvent ) {
    this.hideTooltip(e);
  }

  constructor(
    private el: ElementRef,
    private renderer: Renderer2,
    private coordsService: CoordsService,
    @Inject(DOCUMENT) doc
  ) {
    this.docBody = doc.body;
  }

  public ngAfterViewInit(): void {
    this.tooltipContainer = this.renderer.createElement('div');
    this.renderer.addClass( this.tooltipContainer, 'tooltip--tip');
    this.renderer.addClass( this.tooltipContainer, 'tooltip--pos_' + this.position);
  }

  public showTooltip( e: MouseEvent ): void {

    if ( this.tooltip …

在我的 TSLint 文件中，我有：

"no-unused-variable": true

在我的组件中，有时我有：

// tslint:disable-next-line:no-unused-variable
@HostBinding('class') private classes = 'my-theme';

因为classes是私有的，TSLint 抱怨，所以我每次都必须禁用 TSLint。

因为封装我不想公开。@HostBinding

解决这个问题的推荐方法是什么？

我会很好地理解 Angular @HostBinding 概念。不幸的是，我的书很好，但这个概念解释得不是很清楚。

请看代码：

@Component({
  selector: 'app-test-component',
  templateUrl: './test-component.component.html',
  styleUrls: ['./test-component.component.css']
})
export class TestComponentComponent implements OnInit {

  @Input() dataModel:AppModel;
  @HostBinding('attr.class') cssClass = 'alfa';

  constructor() { 

(...)

我个人的解释：“主机绑定允许从组件本身（换句话说，从我下面提到的这个文件）中设置主机元素（在本例中为 app-test-component 标记）中的某些内容；在这种情况下，我将此标签的类属性设置为名为 cssClass 的变量并使用属性“alfa””。这是对的吗？

在这种情况下，如果我在相应的CSS文件中定义了“alfa”样式，为什么我在显示我的组件的页面中看不到这种样式（即背景颜色或其他颜色）？

编辑

我需要很好地理解这一行

@HostBinding('attr.class') cssClass = 'alfa';

这是否完全等同于“将模板元素的 class 属性设置为分配给值'alfa'的字符串 cssClass”？（或者，换句话说，与主模板标签中的指令“class='alfa'”相同）

并且，您能给我写一个具有相同结果但不使用 @hostbinding 的示例吗？我相信比较这些等效的解决方案对我来说非常有帮助。

找不到它的文档。

从示例中我得到了 3 个案例：

• @HostBinding(" attr .something")

• @HostBinding(" class .something")

• @HostBinding(" style .something")

但还有更多吗？