从父组件访问函数子组件，角度 4答案

【问题标题】：Access function child component from parent component, angular 4从父组件访问函数子组件，角度 4
【发布时间】：2018-01-04 15:46:53
【问题描述】：

如何在父视图中通过事件点击访问子组件中的函数。

我的父视图中有两个按钮，每个按钮代表一个组件。

<ul>
  <li><button (click)="buttonOne()">component 1</button></li>
  <li><button (click)="buttonTwo()">component 2</button></li>
</ul>

我想单击按钮组件 1 并显示组件 1，当我单击按钮组件 2 时隐藏组件 1 并显示组件 2。

子组件

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'component1',
  templateUrl: './componentOne.component.html',
  styleUrls: ['./componentOne.component.less']
})
export class ComponentOne implements OnInit {
  showComponent: boolean = false;

  constructor() {}
  buttonOne(): boolean {
    this.showComponent = true;
  }
  buttonTwo(): boolean {
    this.showComponent = false;
  }

  ngOnInit() {}
}

父组件

import { Component, OnInit } from '@angular/core';
import { ComponentOne } from '...parent-component/component-one.component';

@Component({
  selector: 'parent-component',
  templateUrl: 'parent-component.component.html',
  styleUrls: ['parent-component.component.less']
})
export class ParentComponent implements OnInit {

  constructor() {}

  ngOnInit() {
  }

  ngOnDestroy() {
  }
}

【问题讨论】：

为此您不需要子父组件，您可以放置它们并根据 ngIf 启用/禁用
组件一将是图表，组件二也是...我将仅将标题和按钮放入父级。关于什么？谢谢。
仍然不需要父子组件，有一个组件来显示两者并相应地启用禁用
看看this question。

标签： angular

【解决方案1】：

显示子组件的代码应该在父组件中，可能是这样的：

父组件：

import { Component, OnInit } from '@angular/core';
import { ComponentOne } from '...parent-component/component-one.component';

@Component({
  selector: 'parent-component',
  templateUrl: 'parent-component.component.html',
  styleUrls: ['parent-component.component.less']
})
export class ParentComponent implements OnInit {

  constructor() {}

  buttonOne(): boolean {
    this.showComponentOne = true;
  }

  buttonTwo(): boolean {
    this.showComponentTwo = true;
  }

  ngOnInit() {
  }

  ngOnDestroy() {
  }

}

父组件 HTML：

<ul>
  <li><button (click)="buttonOne()">component 1</button></li>
  <li><button (click)="buttonTwo()">component 2</button></li>
</ul>
<component-one *ngIf="showComponentOne"></component-one>
<component-two *ngIf="showComponentTwo"></component-two>

【讨论】：

可以，我改组件的时候改路由，组件1=url/component-1 组件2=url/component-2

【解决方案2】：

我不知道你是如何创建组件的，但我是怎么学的

<ul>
  <li><component1>component 1</component1></li>
  <li><component2>component 2</component2></li>
</ul>

鉴于此，您应该在组件 HTML 中添加局部变量，如下所示：

<ul>
  <li><component1 #comp1>component 1</component1></li>
  <li><component2 #comp2>component 2</component2></li>
</ul>

通过这样做，您允许 Angular 获取子引用，您可以使用

进入您的 TS

@ViewChild(Component1Component): comp1: Component1Component;    
@ViewChild(Component2Component): comp2: Component2Component;

然后，您可以这样做

this.comp1.myFunctionToCall();
this.comp2.myFunctionToCall();

或者，在你的 HTML 中，你可以像这样使用局部变量

<ul>
  <li><component1 #comp1 (click)="comp1.myFunctionToCall()">component 1</component1></li>
  <li><component2 #comp2 (click)="comp2.myFunctionToCall()">component 2</component2></li>
</ul>

【讨论】：