角 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 |如何从父组件调用子组件中的函数?的主要内容,如果未能解决你的问题,请参考以下文章
从父组件调用时,angular 2 变量在子组件方法中返回 null