组件接受传值
使用 @Input()
定义
@Component({
selector: 'app-page-tip',
template: './page-tip.component.html',
styleUrls: ['./page-tip.component.scss']
})
export class PageTipComponent {
@Input() public title = '提示';
}
使用
<app-page-tip [title]="'标题'"></app-page-tip>
组件事件通知
通过 @Output()
定义事件,使用 .emit()
触发事件通知
@Output() public valueChange = new EventEmitter();
public tap() {
this.valueChange.emit();
}
使用
<app-page-tip (valueChange)="tapValue()"></app-page-tip>
双向绑定
使用 [()]
进行双向绑定,那么应该修改事件,保证 事件名为 参数名 + 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();
}
}
使用
<app-page-tip [(title)]="title"></app-page-tip>
获取页面元素
例如
<div>12312</div>
<app-page-tip [(title)]="title"></app-page-tip>
获取 div
,必须在div
上加 #+命名
<div #app>12312</div>
然后通过 @ViewChild('命名')
获取
@ViewChild('app')
private box: ElementRef;
这是 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
});
}
}
获取页面上的自定义组件
例如
<app-page-tip [(title)]="title"></app-page-tip>
通过 @ViewChild(组件类名)
获取
@ViewChild(PageTipComponent)
private box: PageTipComponent;
Reprint please keep the original link: https://zodream.cn/blog/id/149.html