组件接受传值
使用 @Input() 定义
@Component({
selector: 'app-page-tip',
template: './page-tip.component.html',
styleUrls: ['./page-tip.component.scss']
})
export class PageTipComponent {
@Input() public title = '提示';
}12345678910
使用
<app-page-tip [title]="'标题'"></app-page-tip>1
组件事件通知
通过 @Output() 定义事件，使用 .emit() 触发事件通知
@Output() public valueChange = new EventEmitter();
public tap() {
this.valueChange.emit();
}12345
使用
<app-page-tip (valueChange)="tapValue()"></app-page-tip>1
双向绑定
使用 [()] 进行双向绑定，那么应该修改事件，保证 事件名为 参数名 + Change
例如
@Component({
selector: 'app-page-tip',
template: './page-tip.component.html',
styleUrls: ['./page-tip.component.scss']
})
export class PageTipComponent {
@Input() public title = '提示';
@Output() public titleChange = new EventEmitter();
public tap() {
this.titleChange.emit();
}
}12345678910111213141516
使用
<app-page-tip [(title)]="title"></app-page-tip>1
获取页面元素
例如
<div>12312</div>
<app-page-tip [(title)]="title"></app-page-tip>12
获取 div，必须在div 上加 #+命名
然后通过 @ViewChild('命名') 获取
@ViewChild('app')
private box: ElementRef;12
这是 box.nativeElement 就是 HTMLDivElement，可以想普通元素一样操作。
如果要绑定事件，那么请注意先等页面已经生成，不然获取不到。
ngAfterViewInit 就是在页面初始化后触发。
export class HomeComponent implements AfterViewInit {
@ViewChild('app')
private box: ElementRef;
ngAfterViewInit(): void {
const div = this.box.nativeElement as HTMLDivElement;
div.addEventListener('click', (event) => {
// TODO
});
}
}123456789101112
获取页面上的自定义组件
例如
<app-page-tip [(title)]="title"></app-page-tip>1
通过 @ViewChild(组件类名) 获取
@ViewChild(PageTipComponent)
private box: PageTipComponent;12
转载请保留原文链接： https://zodream.cn/blog/id/149.html