Angular 4：如何通过父组件视图点击事件调用子组件函数并切换显示

你的需求核心是父组件通过点击事件调用子组件的方法，控制子组件的显示/隐藏并切换展示目标组件，咱们一步步调整代码来实现：

1. 修正子组件（ComponentOne）代码 #

首先，子组件里的方法返回值定义有问题（声明返回boolean但没返回值），先修正；同时要确保子组件模板用内部变量控制自身显示：

// child.component.ts
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() {}
  
  // 调整方法返回类型为void，符合实际逻辑
  buttonOne(): void {
    this.showComponent = true;
  }
  
  buttonTwo(): void {
    this.showComponent = false;
  }
  
  ngOnInit() {}
}

子组件模板（componentOne.component.html）：

<div *ngIf="showComponent">
  <!-- 这里放Component1的具体内容 -->
  我是Component1
</div>

2. 新增ComponentTwo（若未创建） #

因为需求要切换显示Component2，需要创建对应的子组件，结构和ComponentOne类似：

// component-two.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'component2',
  templateUrl: './componentTwo.component.html',
  styleUrls: ['./componentTwo.component.less']
})
export class ComponentTwo implements OnInit {
  showComponent: boolean = false;
  constructor() {}
  
  show(): void {
    this.showComponent = true;
  }
  
  hide(): void {
    this.showComponent = false;
  }
  
  ngOnInit() {}
}

ComponentTwo模板（componentTwo.component.html）：

<div *ngIf="showComponent">
  <!-- 这里放Component2的具体内容 -->
  我是Component2
</div>

3. 修改父组件代码 #

父组件需要通过@ViewChild获取子组件实例，才能调用子组件的方法控制显示：

// parent.component.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { ComponentOne } from './component-one.component'; // 确保路径正确
import { ComponentTwo } from './component-two.component'; // 新增引入

@Component({
  selector: 'parent-component',
  templateUrl: 'parent-component.component.html',
  styleUrls: ['./parent-component.component.less']
})
export class ParentComponent implements OnInit {
  // 获取两个子组件的实例
  @ViewChild(ComponentOne) componentOne!: ComponentOne;
  @ViewChild(ComponentTwo) componentTwo!: ComponentTwo;

  constructor() {}

  ngOnInit() { }
  
  // 点击component1按钮的处理逻辑
  buttonOne(): void {
    this.componentOne.buttonOne(); // 显示Component1
    this.componentTwo.hide(); // 隐藏Component2
  }
  
  // 点击component2按钮的处理逻辑
  buttonTwo(): void {
    this.componentOne.buttonTwo(); // 隐藏Component1
    this.componentTwo.show(); // 显示Component2
  }

  ngOnDestroy() { }
}

4. 修改父组件模板 #

父组件模板里要添加两个子组件的标签，保留原按钮：

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

<!-- 引入两个子组件 -->
<component1></component1>
<component2></component2>

简化思路：父组件统一管理显示状态 #

其实你也可以不用调用子组件方法，直接在父组件用变量控制两个子组件的显示/隐藏，代码更简洁：

父组件代码修改： #

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

@Component({
  selector: 'parent-component',
  templateUrl: 'parent-component.component.html',
  styleUrls: ['./parent-component.component.less']
})
export class ParentComponent implements OnInit {
  activeComponent: 'component1' | 'component2' | null = null;

  constructor() {}

  ngOnInit() { }
  
  showComponent1(): void {
    this.activeComponent = 'component1';
  }
  
  showComponent2(): void {
    this.activeComponent = 'component2';
  }

  ngOnDestroy() { }
}

父组件模板修改： #

<ul>
  <li><button (click)="showComponent1()">component 1</button></li>
  <li><button (click)="showComponent2()">component 2</button></li>
</ul>

<component1 *ngIf="activeComponent === 'component1'"></component1>
<component2 *ngIf="activeComponent === 'component2'"></component2>

这种方式不需要子组件内部的控制逻辑，由父组件统一管理显示状态，更易维护。

内容的提问来源于stack exchange，提问作者deleting