Question

我有hierarhy中的组件：app.component＆gt; intro.component＆gt; header.component。我想在header.component中使用，该方法在app.component中定义。我认识到用@viewChild制作它的方法。什么最简单的方法让它发挥作用？

//编辑我想在header.component.html中的html标记上执行（单击）事件。在这个函数中，我想从app.component运行方法。

Answer 1

您还可以将回调函数作为@input（React样式）传递给子组件：

＆＃13;

	//app.component.html:

	<app-intro [appMethod] = "boundMethod"></app-intro>

	export class AppComponent {	

	    ngOnInit() {
                this.boundMethod = this.appMethod.bind(this);
	    }

	    appMethod() {
                console.log("appMethod called");
	    }
	}


	//intro.component:

	<app-header [appMethod] = "appMethod"></app-header>

	export class IntroComponent {
	    @Input() public appMethod: Function; 
	}

	//header.component:

	export class HeaderComponent {
	    @Input() appMethod: Function; 
	    ngOnInit() {
                appMethod(); // Call parent method 
	    }
	}

＆＃13;

Answer 2

一个可能的例子：

在app.component.html的html中：

...<app-intro></app-intro>

intro.compoennt.html中的html：

...<app-header #header></app-header>

并在app.component.ts中：

@ContentChild("header")
public headerComponent: HeaderComponent;

检查https://angular.io/api/core/ContentChild

angular2使用另一个组件的方法

2 个答案: