angular - 是否可以使用项目数据插入角度库组件？

Question

我正在创建一个自定义 Angular 组件库，但我遇到了一个问题。我在我的库中创建了一个包含插值数据的组件。在该组件的 .ts 文件中，我声明了变量，但只分配了一个类型，因为我不想要默认值。（例如：{{myVar}} myVar:string;}

在我导入库的实际项目中，我将我的库组件包含在 app.component.html 和 app.component.ts 中，我重新定义了相同的变量，但这次使用了一个值。（例如：myVar: string = "我的实际数据"）。但是，这在呈现页面时不会出现。我假设是因为库组件仍在查看库中的 .ts 文件以获取值。这是一个正确的假设吗？如果是这样，是否有任何方法可以使用来自正在导入它的项目的数据来插入库中的组件？

谢谢你。

标签： angularinterpolationlibraries

Answer 1

最好的方法是使用 Directive & Input Decorator。

<mat-table [dataSource]="dataResolved">
.....

---

@Input() dataResolved: DataResolvedDirective;

---

@Directive({
  selector: '[dataResolved]'
})
export class DataResolvedDirective{

  constructor( httpClient: HttpClient ) { // OR DI - Existing Service
    }
  @Input() set dataResolved( ) {
        return this.httpClient.get('remote server url + uri');
    }