将变量传递给私有 npm 包

Question

我创建了一个私有的 npm 包，我可以使用 html 中的以下代码在我的其他应用程序中运行它：

<app-header-name></app-header-name>

这是它运行的 npm 包中的代码：

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-header-name',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css'],
})
export class HeaderComponent implements OnInit {
  public blob: any;
  constructor() {}

  ngOnInit(): void {
    console.log(this.blob);
  }
}

这是 npm 包中的 html 代码：

<div class="row">
  <div class="col d-flex justify-content-center">
    Click the button to download the template
  </div>
</div>

我的问题是，如何将应用程序中的变量传递到 npm 包中的变量 blob 中？ 我尝试了以下操作，只是控制台记录了“未定义”：

<app-header-name blob="bazinga"></app-header-name>

另外，有没有办法从 npm 包中传回数据？ 例如，它将接收字符串 blob 变量，然后向其中添加另一个单词并将其传递回主应用程序？

Answer 1

您需要在组件中添加一个输入。

import { Component, EventEmitter, OnInit, Input } from '@angular/core';
@Component({
  selector: 'app-header-name',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css'],
})
export class HeaderComponent implements OnInit {
  @Input() blob: any;

  @Output() somethingOut = new EventEmitter();

  ngOnInit(): void {
    console.log(this.blob);
  }

  sendToParent() {
    this.somethingOut.emit({ data: 'Hello from child component '});
  }
}

传入一个字符串

<app-header-name blob="bazinga"></app-header-name>

从父级传入一个变量

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

传入和传出一个变量，父组件需要一个函数来接收数据。 请注意$event是必需的，因为孩子正在传递数据

<app-header-name [blob]="someVarOnTheParent" (somethingOut)="parentFunc($event)"></app-header-name>