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

Posted

技术标签:

【中文标题】角 6 |如何从父组件调用子组件中的函数?【英文标题】:Angular 6 | How to invoke function in child component from parent component? 【发布时间】: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的官方文档 看看这个***.com/questions/48073057/… 谢谢你就是我要找的 【参考方案1】:

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

【讨论】:

【参考方案2】:

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

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

【讨论】:

以上是关于角 6 |如何从父组件调用子组件中的函数?的主要内容,如果未能解决你的问题,请参考以下文章

ReactJS中从父组件调用子函数时如何在子组件中设置状态

从reactjs中的父组件调用并将参数传递给子组件的函数

如何从父组件调用子组件方法

从父组件调用时,angular 2 变量在子组件方法中返回 null

如何将 Angular 5 中的点击数据从父组件传递到子组件?

如何将从父组件传递的道具推送到子组件中的数组?