Angular 4子组件模板调用父组件函数及ng2-order-pipe排序咨询

我来帮你搞定这两个Angular相关的问题，都是实际开发中很常见的场景：

1. 如何在Angular 4的子组件模板中调用父组件函数？ #

这里有几种实用的方法，根据你的组件结构和需求选择就行：

方法一：使用@Output()事件发射器（最推荐） #

这是Angular官方推荐的组件间通信方式，符合单向数据流的设计原则，避免组件间耦合过深：

1. 在子组件里定义一个@Output属性，类型为EventEmitter
2. 子组件模板触发这个事件，还能传递参数给父组件
3. 父组件模板绑定这个事件，关联到自己的函数

子组件代码（child.component.ts）：

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

@Component({
  selector: 'app-child',
  template: `<button (click)="triggerParentFunc()">调用父组件函数</button>`
})
export class ChildComponent {
  @Output() callParent = new EventEmitter<string>();

  triggerParentFunc() {
    // 可以传递任意类型的参数
    this.callParent.emit('子组件传来的消息');
  }
}

父组件模板（parent.component.html）：

<app-child (callParent)="handleParentFunc($event)"></app-child>

父组件类（parent.component.ts）：

// 确保函数是public，子组件才能调用到
public handleParentFunc(message: string) {
  console.log('父组件函数被触发，收到参数：', message);
  // 这里写你的业务逻辑
}

方法二：通过模板引用变量直接调用（适合简单场景） #

如果子组件直接嵌套在父组件模板里，可以给父组件加个模板引用变量，子组件模板就能直接通过这个变量调用父组件函数：

父组件模板：

<!-- 给父组件容器加引用变量parentRef -->
<div #parentRef>
  <app-child></app-child>
</div>

子组件模板：

<button (click)="parentRef.handleParentFunc('直接调用的参数')">调用父组件函数</button>

⚠️ 注意：这种方法只适合简单的组件层级，而且父组件的函数必须是public的，不建议在复杂组件结构中使用。

方法三：将父组件函数作为@Input()传递 #

把父组件的函数作为输入属性传给子组件，子组件直接调用这个函数：

父组件模板：

<app-child [parentHandler]="handleParentFunc"></app-child>

子组件类：

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

@Component({
  selector: 'app-child',
  template: `<button (click)="parentHandler('输入属性传递的参数')">调用父组件函数</button>`
})
export class ChildComponent {
  @Input() parentHandler: (msg: string) => void;
}

父组件的handleParentFunc函数和之前保持一致即可。

2. 基于ng2-order-pipe完善网格排序功能 #

从你给出的代码片段来看，已经走对了路子，我来帮你补全完整的实现步骤，让排序功能正常跑起来：

第一步：确认依赖安装 #

先确保你已经安装了ng2-order-pipe：

npm install ng2-order-pipe --save

第二步：在模块中导入 #

你的app.module.ts已经导入了模块，记得要加到imports数组里：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Ng2OrderModule } from 'ng2-order-pipe';

import { AppComponent } from './app.component';
import { ManageComponent } from './manage/manage.component';

@NgModule({
  declarations: [AppComponent, ManageComponent],
  imports: [BrowserModule, Ng2OrderModule], // 这里一定要加
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

第三步：组件中实现排序逻辑 #

在manage.component.ts里定义排序需要的变量和sort函数：

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

@Component({
  selector: 'app-manage',
  templateUrl: './manage.component.html'
})
export class ManageComponent {
  // 当前排序的字段名
  key: string = '';
  // 排序方向：false=升序，true=降序
  reverse: boolean = false;
  // 模拟的网格数据，替换成你的实际数据
  gridData = [
    { name: 'Alice', contact: '1234567890' },
    { name: 'Bob', contact: '0987654321' },
    { name: 'Charlie', contact: '5555555555' }
  ];

  sort(sortKey: string) {
    // 如果点击的是当前已排序的字段，切换排序方向
    if (this.key === sortKey) {
      this.reverse = !this.reverse;
    } else {
      // 否则设置新的排序字段，默认升序
      this.key = sortKey;
      this.reverse = false;
    }
  }
}

第四步：完善模板代码 #

把你写的模板补全，加上排序管道和状态图标：

<table class="table no-margin">
  <thead>
    <tr>
      <th (click)="sort('name')">
        Name 
        <!-- 根据排序状态显示不同图标 -->
        <span class="fa fa-sort" *ngIf="key !== 'name'"></span>
        <span class="fa fa-sort-asc" *ngIf="key === 'name' && !reverse"></span>
        <span class="fa fa-sort-desc" *ngIf="key === 'name' && reverse"></span>
      </th>
      <th (click)="sort('contact')">
        Contact No 
        <span class="fa fa-sort" *ngIf="key !== 'contact'"></span>
        <span class="fa fa-sort-asc" *ngIf="key === 'contact' && !reverse"></span>
        <span class="fa fa-sort-desc" *ngIf="key === 'contact' && reverse"></span>
      </th>
      <!-- 其他表头字段 -->
    </tr>
  </thead>
  <tbody>
    <!-- 使用ng2-order-pipe对数据排序 -->
    <tr *ngFor="let item of gridData | orderBy: key : reverse">
      <td>{{ item.name }}</td>
      <td>{{ item.contact }}</td>
      <!-- 其他列 -->
    </tr>
  </tbody>
</table>

⚠️ 提示：如果你的项目没有引入Font Awesome，记得先引入，或者替换成你项目中使用的图标库。

内容的提问来源于stack exchange，提问作者J.K.A.