2022年9月22日 星期四

Angular #範本參考變數(Template reference variables)(10)

使用在Template中
html部分
  <input type="text" [(ngModel)]="title" #inputTxt />
  <button (click)="ChangeTitle()">點我</button>
  目前文字:{{inputTxt.value}},目前字數:{{inputTxt.value.length}} 
ts部分
  title = "123";
  ChangeTitle() {
    this.title = "被點了";
  }
使用在directive中
承上面程式碼再另外開新增一個Template
然後加入上面的Template
 <app-template-reference-variables #tfvTemp></app-template-reference-variables>
 <button (click)="tfvTemp.title = '被外面的點了'">被外面的點了</button>;
點被外面的點了也可變動原本Template的屬性
參考資料
1.保哥的Angular 開發實戰:從零開始
2.Angular官網