角 6 |如何从父组件调用子组件中的函数？答案

【问题标题】：Angular 6 | How to invoke function in child component from parent component?角 6 |如何从父组件调用子组件中的函数？
【发布时间】：2019-02-01 04:48:03
【问题描述】：

我是 Angular 的新手，我已经掌握了来自另一个组件的调用函数。

我的结构是：

标题组件

带有侧边栏组件的文件夹在哪里

所以在侧边栏中我有这段代码，你可以在哪里看到带有功能 sideBar.toggle 的按钮，它在那个地方工作，但是我试图将按钮移到实际应该在的标题：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.scss']
})
export class SidebarComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

.container {
    width: 100%;
    height:auto;
  }

  .sidenav {
    width: 300px;
  }

<mat-drawer-container class="container" autosize>
    <mat-drawer #sideBar class="sidenav" mode="over">
      <p>Auto-resizing sidenav</p>
      <p *ngIf="showFiller">Lorem, ipsum dolor sit amet consectetur.</p>
      <button (click)="showFiller = !showFiller" mat-raised-button>
        Toggle extra text
      </button>
    </mat-drawer>
  
    <div class="example-sidenav-content">
      <app-google-map></app-google-map>
    </div>
    <button type="button" mat-button (click)="sideBar.toggle()">
        Toggle sidenav
      </button>
  </mat-drawer-container>

但是当我尝试从 Header 组件调用按钮时，它不起作用

代码如下：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {

  Name = 'Menuckaren';
  Navigation = 'Navigácia';
  icons = ['color_lens', 'favorite'];

  constructor() { }

  ngOnInit() {
  }

}

.example-icon {
    padding: 0 14px;
  }
  
  .example-spacer {
    flex: 1 1 auto;
  }

  .navigation {
    -webkit-box-shadow: inset 0px 13px 19px -2px rgba(0,0,0,0.43);
    -moz-box-shadow: inset 0px 13px 19px -2px rgba(0,0,0,0.43);
    box-shadow: inset 0px 13px 19px -2px rgba(0,0,0,0.43);
  }

<mat-toolbar color="primary">
  <mat-toolbar-row>
    <span>{{Name}}</span>
    <span class="example-spacer"></span>
    <button *ngFor="let icon of icons" mat-icon-button>
      <mat-icon>{{icon}}</mat-icon>
    </button>
  </mat-toolbar-row>

  <mat-toolbar-row class="navigation">
    <button mat-raised-button color="primary" (click)="sideBar.toggle()">{{Navigation}}</button>
    <span class="example-spacer"></span>
  </mat-toolbar-row>
</mat-toolbar>

【问题讨论】：

我不明白你想要达到什么目的，所以我只能提供component interaction的官方文档
看看这个stackoverflow.com/questions/48073057/…
谢谢你就是我要找的

标签： angular

【解决方案1】：

使用事件发射器。并尝试掌握使用@output 和@input 字段/属性的想法 https://angular.io/api/core/EventEmitter

【讨论】：

【解决方案2】：

这是预期的行为。 toggle() 函数在侧边栏组件中工作，因为您有 #sideBar 引用标记为 mat-drawer。但我在您的 app-header 组件中看不到任何侧边栏引用。

我建议您按照@Ploppy 的建议阅读组件交互指南的官方文档。然后你会意识到有很多方法可以实现你想要的。

【讨论】：