组件接受传值

使用 @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