有人知道如何获取组件模板中定义的元素吗?聚合物让$和$$变得很容易。
我只是想知道如何在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;
}
}
我如何从类定义中捕获或获得p或输入元素的引用?
对于*ngIf中的组件,另一种方法是:
我想要选择的组件是在一个div的*ngIf语句中,@ jsgopil的答案上面可能工作(谢谢@ jsgopil !),但我最终找到了一种避免使用*ngIf的方法,通过使用CSS隐藏元素。
当[className]中的条件为真时,将显示div,使用#命名组件可以工作,并且可以从typescript代码中选择它。当条件为false时,它不会显示,而且我不需要选择它。
组件:
@Component({
selector: 'bla',
templateUrl: 'bla.component.html',
styleUrls: ['bla.component.scss']
})
export class BlaComponent implements OnInit, OnDestroy {
@ViewChild('myComponentWidget', {static: true}) public myComponentWidget: any;
@Input('action') action: ActionType; // an enum defined in our code. (action could also be declared locally)
constructor() {
etc;
}
// this lets you use an enum in the HMTL (ActionType.SomeType)
public get actionTypeEnum(): typeOf ActionType {
return ActionType;
}
public someMethodXYZ: void {
this.myComponentWidget.someMethod(); // use it like that, assuming the method exists
}
然后在bla。component.html文件中:
<div [className]="action === actionTypeEnum.SomeType ? 'show-it' : 'do-not-show'">
<my-component #myComponentWidget etc></my-component>
</div>
<div>
<button type="reset" class="bunch-of-classes" (click)="someMethodXYZ()">
<span>XYZ</span>
</button>
</div>
和CSS文件:
::ng-deep {
.show-it {
display: block; // example, actually a lot more css in our code
}
.do-not-show {
display: none';
}
}