相关疑难解决方法(0)

如何获得角度2的dom元素

我有一个有p元素的组件.它的onClick事件会将其更改为a,textarea以便用户可以编辑数据.我的问题是:

  • 我如何能够专注于textarea?
  • 我怎么能到达元素所以我可以在其上应用.focus()?
  • 我可以避免使用document.getElemenntById()吗?

我曾尝试使用"ElementRef"和"@ViewChild()",但似乎我遗漏了一些东西:

// ------ THE CLASS
@ViewChild('tasknoteId') taskNoteRef:ElementRef;

  noteEditMode: boolean = false;

 get isShowNote (){
    return  !this.noteEditMode && this.todo.note  ? true : false;
  }
  taskNote: string;
  toggleNoteEditMode () {
    this.noteEditMode = !this.noteEditMode;
      this.renderer.invokeElementMethod(this.taskNoteRef.nativeElement,'focus');
  }

// ------ THE COMPONENT
<span class="the-insert">
      <form [hidden]="!noteEditMode && todo.note">
        <textarea #tasknoteId id="tasknote"
                  name="tasknote"
                  [(ngModel)]="todo.note"
                  placeholder="{{ notePlaceholder }}"
                  style="background-color:pink"
                  (blur)="updateNote()" (click)="toggleNoteEditMode()"
                  [autofocus]="noteEditMode"
                  [innerHTML]="todo.note">
        </textarea>
      </form>
     </span>
Run Code Online (Sandbox Code Playgroud)

angular

126
推荐指数
3
解决办法
32万
查看次数

Angular 2使用"模板"来在组件循环内使用ng-content

我正在尝试创建一个组件,它将执行一些操作并循环结果集.我希望能够为循环结果集中的项目提供"模板".

例如,这是我想要的一个想法:

<search-field>
    <ng-template let-item>
        <span><strong>{{item.foo}}</strong></span>
        <span>{{item.bar}}</span>
    </ng-template>
</search-field>
Run Code Online (Sandbox Code Playgroud)

search-field组件中的内容应该用作该组件中循环结果集的每次迭代的模板.

这是search-field组件的外观:

<div class="search-container">
    <div class="search-input">
        <input type="text" class="form-control" placeholder="Search users..." [(ngModel)]="searchString" (ngModelChange)="searchStringChanged($event)">
        <div class="md-icon">search</div>
    </div>

    <ul class="search-results" *ngIf="searchResults.length > 0">
        <li class="search-results__item" *ngFor="let result of searchResults">
            <ng-content [item]="item"></ng-content> <!-- Template should be used here on each iteration and allow to pass in "item" to use in example up above -->
        </li>
    </ul>
</div>
Run Code Online (Sandbox Code Playgroud)

如何将循环的每个项目传递给ng-content,以便我可以在第一个示例的代码中访问它?

html angular

5
推荐指数
1
解决办法
3486
查看次数

标签 统计

angular ×2

html ×1