如何将角度组件与angular7中的所有依赖组件和服务打包在一起，以便在其他角度应用程序中使用它

Question

我正在开发一个应用程序，我开发了一个组件，它显示在路由器插座中，并在其中包含其他嵌套组件。除此之外，它还在ngOnInit（）方法中使用自己的服务从后端获取数据。我希望打包这个组件。因此，它可以在没有太多配置的情况下在另一个角度应用程序中重用。

以下是组件代码：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { RSService } from './details.service';
import { Term } from './Term';
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';

@Component({
  selector: 'rs-details',
  templateUrl: './details.component.html',
  styleUrls: ['./details.component.css']
})
export class DetailsComponent implements OnInit, OnDestroy {

    terms: Term[];
    rowGroupMetadata: any;
    rowData: any;
    private sub: Subscription;

    constructor(private rsService: RSService, private _route: ActivatedRoute) { }

    ngOnInit() {
        this.sub = this._route.params.subscribe(
            params => {
                const id = +params['id'];
                this.rsService.getRS(id).then(terms => {
                    this.terms = terms;
                    this.updateRowGroupMetaData();
                });
            });
        console.log('in Product details ngOnInit');
    }
    ngOnDestroy(): void {
        this.sub.unsubscribe();
        console.log('in ngOnDestroy');
    }
    updateRowGroupMetaData() {
      this.rowGroupMetadata = {};
      if (this.terms) {
          for (let i = 0; i < this.terms.length; i++) {
              this.rowData = this.terms[i];
              let SectionName = this.rowData.SectionName;
              if (i === 0) {
                  this.rowGroupMetadata[SectionName] = { index: 0, size: 1 };
              } else {
                  let previousRowData = this.terms[i - 1];
                  let previousRowGroup = previousRowData.SectionName;
                  if (SectionName === previousRowGroup) {
                    this.rowGroupMetadata[SectionName].size++;
                  } else {
                    this.rowGroupMetadata[SectionName] = { index: i, size: 1 };
                  }
              }
          }
      }
  }
}





The goal is to reuse this component without much configuration in other angular application.
Anyone came across the same scenario please point me in right direction.

Answer 1

要打包Angular组件并在其他Angular应用程序中重用它们，可以使用ng-packagr。这甚至可以让您将库发布到npm注册表。 有关详细信息，请查看文档。