{"id":197,"date":"2021-09-03T22:01:27","date_gmt":"2021-09-03T14:01:27","guid":{"rendered":"http:\/\/139.196.75.244\/?p=197"},"modified":"2021-09-09T15:40:23","modified_gmt":"2021-09-09T07:40:23","slug":"nodejs%e5%ad%a6%e4%b9%a0%e4%ba%8c%e3%80%8aangular%e5%ad%a6%e4%b9%a0%e5%9b%9b%e3%80%8b%e5%b1%9e%e6%80%a7%e6%80%a7%e6%8c%87%e4%bb%a4","status":"publish","type":"post","link":"https:\/\/www.tianjm.cn\/?p=197","title":{"rendered":"\u300aAngular\u5b66\u4e60\u56db\u300b\u5c5e\u6027\u578b\u6307\u4ee4"},"content":{"rendered":"\n

\u5c5e\u6027\u578b\u6307\u4ee4<\/strong><\/p>\n\n\n\n

\u521b\u5efa\u5c5e\u6027\u6307\u4ee4 ng generate directive highlight<\/p>\n\n\n\n

<input type=\"text\" id=\"hero-name\" [(ngModel)]=\"hero.name\">\n\n\nexport class AppComponent {\n  title = 'ng-wyy';\n  color<\/span>='';\n}\n\n<div>\n    <input type=\"radio\" name=\"colors\" (click)=\"color<\/span>='lightgreen'\">Green\n    <input type=\"radio\" name=\"colors\" (click)=\"color<\/span>='yellow'\">Yellow\n    <input type=\"radio\" name=\"colors\" (click)=\"color<\/span>='cyan'\">Cyan\n  <\/div>\n\n<p [appHighlight<\/span>]=\"color<\/span>\">Highlight me!<\/p>\nexport class HighlightDirective {\n  constructor(private el:ElementRef) {\n    \/\/ \u6784\u9020\u51fd\u6570\n   }\n   @Input() appHighlight<\/span>='';\n   @HostListener('mouseenter') onMouseEnter() {\n    this.highlight('yellow');\/\/\u76d1\u542c\u9f20\u6807\u8fdb\u5165\n  }\n  @HostListener('mouseleave') onMouseLeave() {\n    this.highlight('');\/\/\u76d1\u542c\u9f20\u6807\u79fb\u51fa\n  }\n  private highlight(color: string) {\n    this.el.nativeElement.style.backgroundColor = this.appHighlight<\/span>;\/\/\u8bbe\u7f6e\u80cc\u666f\u989c\u8272\n  }\n  \n\n}\n\n\u8bf4\u660e\uff1a\n\n\n(click)=\"color='yellow'\u9f20\u6807\u70b9\u51fb\u5355\u9009\u6309\u94ae\uff0ccolor\u7684\u503c\u4e3ayellow\n\n\n<p [appHighlight]=\"color\">Highlight me!<\/p> [appHighlight] \u7684\u503c\u4e3acolor\u7684\u503c\u3002\n\n\n\nthis.el.nativeElement.style.backgroundColor = this.appHighlight;\u8fd9\u53ea\u80cc\u666f\u8272\u4e3aColor\u7684\u503c\u3002\n\n\u9f20\u6807\u70b9\u51fb->Color = yellow-> apphighlight = Color \u3002\n\n\n\n[appHighlight]\u4f7f\u7528\uff0c\u9700\u8981\u5b9a\u4e49@Input() appHighlight='';\n\n\n\n\n\n\n\n<\/code><\/pre>\n\n\n\n
\u6848\u4f8b<\/p>\n\n\n\n
<p appHighlight>\u9f20\u6807\u79fb\u52a8\u4e0a\u53bb\u53d8\u8272<\/p>\/\/\u524d\u53f0\u4ee3\u7801\nng generate directive highlight\/\/\u751f\u6210\u5c5e\u6027\u6307\u4ee4\nhighlight.directive.ts\/\/\u751f\u6210\u7684\u6587\u4ef6\u540d\n\nimport { Directive, ElementRef, HostListener } from '@angular\/core';\n\/\/\u5c5e\u6027\u578b\u6307\u4ee4 ng generate directive highlight\n@Directive({\n  selector: '[appHighlight]'\/\/\u6307\u5b9a\u540d\u79f0\n})\n\nexport class HighlightDirective {\n  constructor(private el:ElementRef) {\n    \/\/ \u6784\u9020\u51fd\u6570\n   }\n   @HostListener('mouseenter') onMouseEnter() {\n    this.highlight('yellow');\/\/\u76d1\u542c\u9f20\u6807\u8fdb\u5165\n  }\n  @HostListener('mouseleave') onMouseLeave() {\n    this.highlight('');\/\/\u76d1\u542c\u9f20\u6807\u79fb\u51fa\n  }\n  private highlight(color: string) {\n    this.el.nativeElement.style.backgroundColor = color;\/\/\u8bbe\u7f6e\u80cc\u666f\u989c\u8272\n  }\n\n}<\/code><\/pre>\n\n\n\n
\u901a\u8fc7 NgNonBindable<\/code> \u505c\u7528 Angular \u5904\u7406\u8fc7\u7a0b<\/strong><\/p>\n\n\n\n
<p>Use ngNonBindable to stop evaluation.{{ 1 + 1 }}<\/p>\n<p ngNonBindable>This should not evaluate: {{ 1 + 1 }}<\/p>\n\n<h3>ngNonBindable with a directive<\/h3>\n<div ngNonBindable [appHighlight]=\"'yellow'\">This should not evaluate: {{ 1 +1 }}, but will highlight yellow.\n<\/div>\n\u8f93\u51fa\nUse ngNonBindable to stop evaluation.2\n\nThis should not evaluate: {{ 1 + 1 }}\n\nngNonBindable with a directive\nThis should not evaluate: {{ 1 +1 }}, but will highlight yellow.<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
\u5c5e\u6027\u578b\u6307\u4ee4 \u521b\u5efa\u5c5e\u6027\u6307\u4ee4 ng generate directive...<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[12],"tags":[],"_links":{"self":[{"href":"https:\/\/www.tianjm.cn\/index.php?rest_route=\/wp\/v2\/posts\/197"}],"collection":[{"href":"https:\/\/www.tianjm.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tianjm.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tianjm.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tianjm.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=197"}],"version-history":[{"count":5,"href":"https:\/\/www.tianjm.cn\/index.php?rest_route=\/wp\/v2\/posts\/197\/revisions"}],"predecessor-version":[{"id":213,"href":"https:\/\/www.tianjm.cn\/index.php?rest_route=\/wp\/v2\/posts\/197\/revisions\/213"}],"wp:attachment":[{"href":"https:\/\/www.tianjm.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=197"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tianjm.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=197"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tianjm.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=197"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}