blocks|key|4408818|text|给这个主题增加困惑的一件事是，装饰器的概念并不是很清楚，当我们考虑像这样的东西时…|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4408819|@HostBinding('attr.something')+
get+something()+{+
++++return+this.somethingElse;+
+}|code-block|syntax|javascript|4408820|它可以工作，因为它是一个get+accessor。你不能使用等价的函数：|offset|length|style|CODE|4408821|@HostBinding('attr.something')+
something()+{+
++++return+this.somethingElse;+
+}|4408822|否则，使用@HostBinding的好处是它确保在绑定值更改时运行更改检测。|4408823|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/12827266/get-and-set-in-typescript^0|0|0|C|3|C|C|0|0|0|5|C|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@$I|11|J|12|K|L]]|9|@$I|13|J|14|1|15]]|A|$]]|$1|M|3|N|5|D|7|16|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|17|8|@$I|18|J|19|K|L]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

<p>One thing that adds confusion to this subject is the idea of decorators is not made very clear, and when we consider something like...</p>

<pre><code>@HostBinding('attr.something') 
get something() { 
    return this.somethingElse; 
 }
</code></pre>

<p>It works, because it is a <a href="https://stackoverflow.com/questions/12827266/get-and-set-in-typescript"><code>get</code> accessor</a>. You couldn't use a function equivalent:</p>

<pre><code>@HostBinding('attr.something') 
something() { 
    return this.somethingElse; 
 }
</code></pre>

<p>Otherwise, the benefit of using <code>@HostBinding</code> is it assures change detection is run when the bound value changes.</p>


blocks|key|4408854|text|@HostBinding的另一个好处是，如果你的绑定直接依赖于一个输入，你可以把它和@Input结合起来，例如：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4408855|@HostBinding('class.fixed-thing')
@Input()
fixed:+boolean;|code-block|syntax|javascript|4408856|entityMap^0|0|C|16|6|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

<p>Another nice thing about <code>@HostBinding</code> is that you can combine it with <code>@Input</code> if your binding relies directly on an input, eg:</p>

<pre><code>@HostBinding('class.fixed-thing')
@Input()
fixed: boolean;
</code></pre>


blocks|key|4408869|text|//+begginers
@Component({
++selector:+'custom-comp',
++template:+`+<div+class="my-class"+(click)="onClick()">CLICK+ME</div>+`,
})
export+class+CustomComp+{
++onClick+=+()+=>+console.log('click+event');
}

//+pros
@Component({
++selector:+'custom-comp',
++template:+`+CLICK+ME+`,
})
export+class+CustomComp+{
++@HostBinding('class')+class+=+'my-class';
++@HostListener('click')+onClick+=+()+=>+console.log('click+event');
}

//+experts
@Component({
++selector:+'custom-comp',
++template:+`+CLICK+ME+`,
++host:+{
++++class:+'my-class',
++++'(click)':+'onClick()',
++},
})
export+class+CustomComp+{}

------------------------------------------------
The+1st+way+will+result+in:
<custom-comp>
+++<div+class="my-class"+(click)="onClick()">
++++++CLICK+ME
+++<div>
</custom-comp>

The+last+2+ways+will+result+in:
<custom-comp+class="my-class"+(click)="onClick()">
+++CLICK+ME
</custom-comp>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4408870|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>// begginers
@Component({
  selector: 'custom-comp',
  template: ` &lt;div class=&quot;my-class&quot; (click)=&quot;onClick()&quot;&gt;CLICK ME&lt;/div&gt; `,
})
export class CustomComp {
  onClick = () =&gt; console.log('click event');
}

// pros
@Component({
  selector: 'custom-comp',
  template: ` CLICK ME `,
})
export class CustomComp {
  @HostBinding('class') class = 'my-class';
  @HostListener('click') onClick = () =&gt; console.log('click event');
}

// experts
@Component({
  selector: 'custom-comp',
  template: ` CLICK ME `,
  host: {
    class: 'my-class',
    '(click)': 'onClick()',
  },
})
export class CustomComp {}

------------------------------------------------
The 1st way will result in:
&lt;custom-comp&gt;
   &lt;div class=&quot;my-class&quot; (click)=&quot;onClick()&quot;&gt;
      CLICK ME
   &lt;div&gt;
&lt;/custom-comp&gt;

The last 2 ways will result in:
&lt;custom-comp class=&quot;my-class&quot; (click)=&quot;onClick()&quot;&gt;
   CLICK ME
&lt;/custom-comp&gt;
</code></pre>


blocks|key|4408881|text|方法装饰器：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4408882|@HostBinding:将自定义逻辑动态绑定到Host元素|4408883|+@HostBinding('class.active')
+activeClass+=+false;|code-block|syntax|javascript|4408884|@HostListen:监听Host元素上的事件|4408885|@HostListener('click')
+activeFunction(){
++++this.activeClass+=+!this.activeClass;
+}|4408886|主体图元：|4408887|++<button+type='button'+class="btn+btn-primary+btn-sm"+appHost>Host</button>|4408888|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>METHOD DECORATORS:</p>
<p>@HostBinding: Dynamic binding custom logic to Host element</p>
<pre><code> @HostBinding('class.active')
 activeClass = false;
</code></pre>
<p>@HostListen: To Listen to events on Host element</p>
<pre><code>@HostListener('click')
 activeFunction(){
    this.activeClass = !this.activeClass;
 }
</code></pre>
<p>Host Element: </p>
<pre><code>  &lt;button type='button' class=&quot;btn btn-primary btn-sm&quot; appHost&gt;Host&lt;/button&gt;
</code></pre>


<p>In my meanderings around the world wide interweb, and now especially the <a href="https://angular.io/guide/styleguide" rel="noreferrer">angular.io style docs</a>, I find many references to <code>@HostBinding</code> and <code>@HostListener</code>. It seems they are quite fundamental, but unfortunately the documentation for them at the moment is a little sketchy.</p>

<p>Can anyone please explain what they are, how they work and give an example of their usage?</p>


@HostBinding and @HostListener: what do they do and what are they for?

在我漫步在万维网上，尤其是现在的上，我发现了很多关于@HostBinding和@HostListener的引用。它们似乎是非常基础的，但不幸的是，目前关于它们的文档有点粗略。谁能解释一下它们是什么，它们是如何工作的，并举例说明它们的用法？

问@HostBinding和@HostListener:它们做什么，它们是用来做什么的？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问@HostBinding和@HostListener:它们做什么，它们是用来做什么的？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问@HostBinding和@HostListener:它们做什么，它们是用来做什么的？
EN