@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() public valueChange = new EventEmitter();

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

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

@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 #app>12312</div>

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

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(PageTipComponent)
    private box: PageTipComponent;