相关疑难解决方法(0)

有人知道如何获取组件模板中定义的元素吗？聚合物使得它真正用简单的$和$$.

我只是想知道如何在Angular中实现它.

以教程为例:

import {Component} from '@angular/core'

@Component({
    selector:'display'
    template:`
     <input #myname(input)="updateName(myname.value)"/>
     <p>My name : {{myName}}</p>
    `

})
export class DisplayComponent {
    myName: string = "Aman";
    updateName(input: String) {
        this.myName = input;
    }
}

如何从类定义中捕获por input元素的引用？

题

显示模板中相应元素后获取@ViewChild最优雅的方法是什么？以下是一个例子.也有Plunker可用.

模板:

<div id="layout" *ngIf="display">
    <div #contentPlaceholder></div>
</div>

零件:

export class AppComponent {

    display = false;
    @ViewChild('contentPlaceholder', {read: ViewContainerRef}) viewContainerRef;

    show() {
        this.display = true;
        console.log(this.viewContainerRef); // undefined
        setTimeout(()=> {
            console.log(this.viewContainerRef); // OK
        }, 1);
    }
}

我有一个默认隐藏其内容的组件.当有人调用@ViewChild方法时,它变得可见.但是,在角度2变化检测完成之前,我无法参考show().我通常将所有必需的操作包装成viewContainerRef如上所示.有更正确的方法吗？

我知道有一个选项setTimeout(()=>{},1),但它会导致太多无用的通话.

答案(Plunker)

我想将数据从HTML传递到组件,所以我创建了这样的事件.

<div id="tutor-price" (click)="passCharge(r.value['charge'])"><span id="month">? 8?</span> <span id="price"> {{r.value['charge']}} </span></div>

在组件中,

passCharge(charge){
   this.charge = charge;
   console.log(this.charge,"give me the number")
}

如果我点击该活动,我看到一切正常.但是我想自动触发这个click事件,因为我希望组件在组件完成加载后立即使用'this.charge'值.

有什么方法可以自动触发(点击)事件吗？

我想从视图中获取本机元素和相关组件的列表。

我会尝试做类似的事情，但这是行不通的：

@ViewChildren('element', { read: [ElementRef, MyComponent] }) private elements: QueryList<any>; // <-- not work

or

@ViewChildren('element', { read: MyComponent }) private elements: QueryList<MyComponent>;
...
this.elements.first.nativeElement // <-- undefined

这项工作，但它看起来不对：

@ViewChildren('element', { read: ElementRef }) private elements: QueryList<ElementRef>;
@ViewChildren('element', { read: MyComponent}) private components: QueryList<MyComponent>;

我的模板简短示例：

<virtual-scroller #scroll>
  <my-component #element *ngFor="let c of components"></my-component>
</virtual-scroller>

我有一个列表和dragula我使用的插件()在某些操作上添加了某些css类.我正在使用Angular5.我想找出某些class(myClass)的存在并删除它并替换为(yourClass).在jquery中,我们可以这样做

$( "p" ).removeClass( "myClass" ).addClass( "yourClass" );

我怎样才能在Angular5中实现这个目标.这里的主要问题是myClass自动添加到li插件所选的内容中.所以使用函数我不能设置类.

当我尝试使用renderer2时,它正在删除css类并添加另一个类.但它只是增加了第一个李.我的代码是

let myTag ; 
myTag = this.el.nativeElement.querySelector("li");
this.renderer.addClass(myTag, 'gu-mirrorss')
this.renderer.removeClass(myTag, 'dragbox');

`<div  class="right-height" id ='dest' [dragula]='"second-bag"' [dragulaModel]="questions"> 
       {{ questions.length == 0 ? ' Drag and drop questions here ' : ' '}}
       <li #vc  data-toggle="tooltip" data-placement="bottom" title= {{question.questionSentence}} class="well dragbox"  *ngFor="let question of questions; let i = index" [attr.data-id]="question.questionId" [attr.data-index]="i" (click)="addThisQuestionToArray(question,i, $event)" [class.active]="isQuestionSelected(question)"  #myId > {{question.questionId}} {{question.questionSentence}}</li>
</div>`