angular9教程之自定义部件及获取页面元素

Fork Me On Github

组件接受传值

使用 @Input() 定义

ts
          
@Component({
    selector: 'app-page-tip',
    template: './page-tip.component.html',
    styleUrls: ['./page-tip.component.scss']
})
export class PageTipComponent {

    @Input() public title = '提示';

}
12345678910

使用

html
 
<app-page-tip [title]="'标题'"></app-page-tip>
1

组件事件通知

通过 @Output() 定义事件,使用 .emit() 触发事件通知

ts
     
@Output() public valueChange = new EventEmitter();

public tap() {
    this.valueChange.emit();
}
12345

使用

html
 
<app-page-tip (valueChange)="tapValue()"></app-page-tip>
1

双向绑定

使用 [()] 进行双向绑定,那么应该修改事件,保证 事件名为 参数名 + Change

例如

ts
                
@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

使用

html
 
<app-page-tip [(title)]="title"></app-page-tip>
1

获取页面元素

例如

html
  
<div>12312</div>
<app-page-tip [(title)]="title"></app-page-tip>
12

获取 div,必须在div 上加 #+命名

html
 
<div #app>12312</div>
1

然后通过 @ViewChild('命名') 获取

ts
  
    @ViewChild('app')
    private box: ElementRef;
12

这是 box.nativeElement 就是 HTMLDivElement,可以想普通元素一样操作。

如果要绑定事件,那么请注意先等页面已经生成,不然获取不到。

ngAfterViewInit 就是在页面初始化后触发。

ts
            
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

获取页面上的自定义组件

例如

html
 
<app-page-tip [(title)]="title"></app-page-tip>
1

通过 @ViewChild(组件类名) 获取

ts
  
    @ViewChild(PageTipComponent)
    private box: PageTipComponent;
12
点击查看全文
标签: angular
0 594 0
在 angular 项目中实现对页面的访问控制
按下回车键,焦点移动到下一个表单或提交表单
使用ng-template 显示tree结构数据
使用 ViewContainerRef.createComponent 替代 ComponentFactoryResolver
angular 12使用 KaTex 显示 AsciiMath 格式的公式