<\/div>\n
Merhaba,<\/p>\n
Bu i\u00e7eri\u011fimizde Angular’da, bir component’in veya directive’in \u015fablon\/template \u00fczerinde kullan\u0131l\u0131rken belirli bir de\u011fi\u015fkene atanarak d\u0131\u015fa aktarmam\u0131z\u0131 ve b\u00f6ylece genellikle HTML template’i i\u00e7erisinde daha okunabilir ve yeniden kullan\u0131labilir hale gelmesini sa\u011flayan exportAs<\/code> \u00f6zelli\u011fini inceliyor olaca\u011f\u0131z.<\/p>\n
\u015eimdi ilk olarak directive’ler \u00fczerinden ba\u015flayal\u0131m. Malumunuz bir directive’i a\u015fa\u011f\u0131daki gibi olu\u015fturmakta ve kullanmaktay\u0131z;<\/p>\n
\n\r\n@Directive({\r\n  selector: '[appMy]',\r\n  standalone: true\r\n})\r\nexport class MyDirective {\r\n  constructor(private elementRef: ElementRef) {\r\n    console.log('MyDirective ile i\u015faretlendi.');\r\n  }\r\n\r\n  @HostListener('mouseover') onMouseOver() {\r\n    this.toggleColor();\r\n  }\r\n\r\n  @HostListener('mouseleave') onMouseLeave() {\r\n    this.toggleColor();\r\n  }\r\n\r\n  toggleColor() {\r\n    const color = this.elementRef.nativeElement.style.color;\r\n    const colotToSet = color == 'red' ? 'black' : 'red';\r\n    this.elementRef.nativeElement.style.color = colotToSet;\r\n  }\r\n}\r\n<\/pre>\n<\/div>\n\n\r\n    <div appMy>\r\n      Doldur be meyhaneci, bo\u015f kalmas\u0131n kadehim...\r\n    <\/div>\r\n<\/pre>\n<\/div>\nBizler exportAs<\/code> \u00f6zelli\u011fi ile bu directive’i a\u015fa\u011f\u0131daki gibi bir de\u011fi\u015fkene atayabilir ve bu atama neticesinde \u015fablonda template reference olarak kullanabilir ve b\u00f6ylece directive’in member’lar\u0131na do\u011frudan eri\u015fim sa\u011flayabiliriz.<\/p>\n
\n\r\n@Directive({\r\n  selector: '[appMy]',\r\n  standalone: true,\r\n  exportAs: 'myDirective'\r\n})\r\n<\/pre>\n<\/div>\n\n\r\n    <div appMy #div="myDirective" (click)="div.toggleColor()">\r\n      Doldur be meyhaneci, bo\u015f kalmas\u0131n kadehim...\r\n    <\/div>\r\n<\/pre>\n<\/div>\nYukar\u0131daki \u00e7al\u0131\u015fmaya dikkat ederseniz e\u011fer olu\u015fturulan directive’in selector’\u0131 ile i\u015faretlenmi\u015f olan div<\/code> nesnesi bir yandan da #div=\"myDirective\"<\/code> \u015feklinde bir ifadeyle de i\u015faretlenmektedir. Burada #div<\/code> template reference olarak tan\u0131mlanm\u0131\u015f bir de\u011fi\u015fkendir, bu nedenle anla\u015f\u0131laca\u011f\u0131 \u00fczere istenilen bir isimle tan\u0131mlanabilir. myDirective<\/code> ise directive’in exportAs<\/code> \u00f6zelli\u011fine kar\u015f\u0131l\u0131k gelmektedir ve tan\u0131mlad\u0131\u011f\u0131m\u0131z template reference de\u011fi\u015fkenine ilgili directive’i atamam\u0131z\u0131 sa\u011flamaktad\u0131r. B\u00f6ylece art\u0131k template reference sayesinde ilgili directive’in member’lar\u0131na do\u011frudan eri\u015febilme imkan\u0131 elde edilmektedir. Haliyle bu nedenden dolay\u0131 (click)=\"div.toggleColor()\"<\/code> ifadesinde g\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere referans de\u011fi\u015fkeni \u00fczerinden directive i\u00e7erisindeki metoda \u015fablonda eri\u015fim g\u00f6sterilip, kullan\u0131labilmi\u015ftir.<\/p>\n
\u0130\u015fte exportAs<\/code> \u00f6zelli\u011fi bu i\u015fe yaramakta ve \u00f6zellikle ihtiya\u00e7 durumlar\u0131nda olduk\u00e7a efektif \u00e7\u00f6z\u00fcmler sa\u011flamam\u0131za imkan tan\u0131maktad\u0131r.<\/p>\n
\u015eimdi inceledi\u011fimiz bu \u00f6zelli\u011fin component’ler \u00fczerindeki benzer etkisini de g\u00f6zlemleyerek i\u00e7eri\u011fimizi noktalayal\u0131m.<\/p>\n
Misal olarak a\u015fa\u011f\u0131daki component’i ele alal\u0131m;<\/p>\n
\n\r\n@Component({\r\n  selector: 'app-my',\r\n  standalone: true,\r\n  template: `\r\n    <div>\r\n      <h2>{{title}}<\/h2>\r\n      <button (click)="changeTitle()">Change Title<\/button>\r\n    <\/div>\r\n  `\r\n})\r\nexport class MyComponent {\r\n  title = 'Initial Title';\r\n\r\n  changeTitle() {\r\n    this.title = 'Title Changed';\r\n  }\r\n}\r\n<\/pre>\n<\/div>\nNormal \u015fartlarda bu component’i selector \u00fczerinden a\u015fa\u011f\u0131daki gibi kullanabiliriz;<\/p>\n
\n\r\n<app-my><\/app-my>\r\n<\/pre>\n<\/div>\nYa da exportAs<\/code> \u00f6zelli\u011fi sayesinde a\u015fa\u011f\u0131daki gibi daha esnek bir \u015fekilde de kullanabiliriz;<\/p>\n
\n\r\n@Component({\r\n  selector: 'app-my',\r\n  standalone: true,\r\n  exportAs: 'myComponent',\r\n  .\r\n  .\r\n  .\r\n})\r\n<\/pre>\n<\/div>\n\n\r\n    <app-my #myComponent="myComponent"><\/app-my>\r\n\r\n    <button (click)="myComponent.changeTitle()">Change Title from Outside<\/button>\r\n<\/pre>\n<\/div>\n\u0130\u015fte bu kadar \ud83d\ude42<\/p>\n
\u0130tiraf etmeliyim ki, basit ama olduk\u00e7a etkili bir \u00f6zellik \ud83d\ude42 Nas\u0131l olduysa bu g\u00fcne kadar g\u00f6zden ka\u00e7\u0131rd\u0131\u011f\u0131m bu \u00f6zelli\u011fi \u00fczerinde odakland\u0131\u011f\u0131m projelerin ihtiya\u00e7 noktalar\u0131nda kullanmak i\u00e7in sab\u0131rs\u0131zlan\u0131yorum \ud83d\ude42<\/p>\n
\u0130lgilenenlerin faydalanmas\u0131 dile\u011fiyle…
\nSonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, Bu i\u00e7eri\u011fimizde Angular’da, bir component’in veya directive’in \u015fablon\/template \u00fczerinde kullan\u0131l\u0131rken belirli bir de\u011fi\u015fkene atanarak d\u0131\u015fa aktarmam\u0131z\u0131 ve b\u00f6ylece genellikle HTML template’i i\u00e7erisinde daha okunabilir ve yeniden kullan\u0131labilir hale gelmesini sa\u011flayan exportAs \u00f6zelli\u011fini inceliyor...<\/p>\n","protected":false},"author":1,"featured_media":26698,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2420],"tags":[2156,5081],"class_list":["post-27093","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","tag-angular","tag-exportas"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/27093","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=27093"}],"version-history":[{"count":6,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/27093\/revisions"}],"predecessor-version":[{"id":27099,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/27093\/revisions\/27099"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/26698"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=27093"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=27093"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=27093"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}