Question

我在Angular应用程序中有一个主组件和许多子组件。我使用渲染子组件。这样的事情。

<body class="nav-md">
    <mainComponent></mainComponent>
    <router-outlet></router-outlet>
</body>

我的主要组件有一个搜索框和一个按钮。当我单击mainComponent中的按钮时，我想调用我的子组件的函数。任何帮助将不胜感激。

Answer 1

在这种情况下，您可以使用ViewChild。

示例：

import { Component, ViewChild } from '@angular/core';
import { ChildComponent } from '../child.component';

@Component({
    selector: 'mainComponent',
    template: '<search (onSearch)="onSearch($event)"></search><child-component></child-component>',
})
export class MainComopnent{
    // ViewChild takes a class type or a reference name string.
    // Here we are using the type
    @ViewChild(ChildComponent) child: ChildComponent;

    onSearch(search: string) {
        this.child.say(search);
    }
}

@Component({
    selector: 'child-component'
})
export class ChildComponent {
    say(something: string) {
        console.log(something);
    }
}

Angular 2中的组件间事件绑定

1 个答案: