如何向Angular私有npm包传递变量并实现数据回传？

我来帮你搞定这两个Angular组件间的数据传递问题——不管是从主应用把变量传到你的npm包组件，还是让npm包处理后回传数据，Angular都有标准的做法，咱们一步步来：

一、向npm包组件传递数据（输入属性） #

你之前直接用 <app-header-name blob="bazinga"></app-header-name> 没生效，核心原因是没有在npm包的组件类中显式声明blob为输入属性。Angular不会自动把模板上的属性绑定到组件类的变量，必须用@Input()装饰器来标记。

步骤1：修改npm包组件的TypeScript代码 #

在HeaderComponent中导入Input装饰器，并给blob变量加上@Input()标记：

import { Component, OnInit, Input } from '@angular/core'; // 新增Input导入
@Component({
  selector: 'app-header-name',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css'],
})
export class HeaderComponent implements OnInit {
  @Input() public blob: any; // 添加@Input()装饰器
  constructor() {}
  ngOnInit(): void {
    console.log(this.blob); // 现在就能拿到主应用传递的值了
  }
}

步骤2：在主应用中正确传递数据 #

根据你要传递的是静态字符串还是动态变量，有两种写法：

• 传递静态字符串：要用方括号包裹属性，把字符串作为表达式传递（否则Angular会把它当作普通DOM属性，而不是输入绑定）：

  <app-header-name [blob]="'bazinga'"></app-header-name>
  

• 传递主应用的变量：直接绑定变量名即可：

  <!-- 假设主应用组件中有一个名为mainAppBlob的变量 -->
  <app-header-name [blob]="mainAppBlob"></app-header-name>
  

二、从npm包组件回传数据（输出事件） #

要实现npm包处理数据后回传给主应用，我们可以用Angular的@Output()装饰器和EventEmitter来触发自定义事件，主应用监听这个事件就能拿到回传的数据。

步骤1：修改npm包组件的TypeScript代码 #

导入Output和EventEmitter，定义一个输出属性，然后在合适的时机触发事件：

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; // 新增Output和EventEmitter导入
@Component({
  selector: 'app-header-name',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css'],
})
export class HeaderComponent implements OnInit {
  @Input() public blob: any;
  @Output() public blobUpdated = new EventEmitter<string>(); // 定义输出事件

  constructor() {}
  ngOnInit(): void {
    console.log(this.blob);
    // 模拟处理数据：给blob添加额外内容后回传
    if (this.blob) {
      const updatedBlob = `${this.blob} - extraWord`;
      this.blobUpdated.emit(updatedBlob); // 触发事件，回传处理后的数据
    }
  }
}

步骤2：在主应用中监听回传事件 #

在调用组件的模板中添加事件监听，然后在主应用组件中实现处理方法：

主应用模板：

<app-header-name [blob]="mainAppBlob" (blobUpdated)="handleBlobUpdate($event)"></app-header-name>

主应用组件TypeScript：

// 主应用组件类中
handleBlobUpdate(updatedBlob: string) {
  console.log('从npm包回传的数据：', updatedBlob);
  // 这里可以处理回传的数据，比如赋值给主应用的变量
}

这样就能完成从主应用到npm包组件的正向传递，以及从npm包到主应用的反向回传啦～

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