1 . 父组件中 加入子组件的名字标签
2. 给子组件一个名字,
3. 在父组件中 通过viewChild去获取到子组件的方法,通过.去调用子组件的方法
html文件中
<app-nav #nav></app-nav>
<!-- 结点的名字 #开头 -->
<div #box>
dom节点
</div>
子组件中定义一个run方法
run(){
console.log('this is nav-run')
}
ts文件中
import { Component, OnInit,ViewChild } from '@angular/core';
@Component({
selector: 'app-news',
templateUrl: './news.component.html',
styleUrls: ['./news.component.less']
})
export class NewsComponent implements OnInit {
// @ViewChild('在html文件中以#开头的名字') 赋值给Box:any;
@ViewChild('box') Box:any;
@ViewChild('nav') nav:any
constructor() { }
ngOnInit() {
}
ngAfterViewInit(): void {
//Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.
//Add 'implements AfterViewInit' to the class.
console.log(this.Box.nativeElement);
this.Box.nativeElement.style.color = 'red'
console.log(this.nav.todolist);
this.nav.run()
//nav组件中所有定义的的方法都可以通过this.nav获取到
}
}