输入绑定不适用于自定义 angular 库

Question

我构建了一个 Angular 库，我可以将其导入外部应用程序。在我的库中存在一个名为 'MainComponent' 的组件，它有一个用于 'objectId' 的@Input 变量。

import { Component, Input } from "@angular/core";
import { Router } from "@angular/router";

@Component({
  selector: "main-component",
  templateUrl: "../templates/app.html",
  styleUrls: ["../styles/app.css"],
  providers: []
})

export class MainComponent {

  @Input() objectId: string;

  constructor() {
    console.log("MainComponent constructor running!! objectId: " + this.objectId);
    // 'objectId' is undefined in the constructor
  }
}

当我将库导入另一个项目时，我这样使用 MainComponent：

<main-component [objectId]="123456"></main-component>

但是，objectId 始终是 undefined。我不确定我做错了什么 - 因为这是一个定制的 Angular 库，所以我必须做一些不同的事情吗？

Answer 1

objectId 在构造函数中查询时是 undefined，但如果您要实现 OnInit 接口并在 ngOnInit() 中查看它，则应该定义它。输入传递不会在构建组件 class 时发生，它位于生命周期的更深处。

Answer 2

objectId 是一个字符串，在输入中您可以传递为：

<!-- use non-bracket notation to pass as string -->
<main-component objectId="123456"></main-component>

或

<!-- use bracket notation with single quotes to pass as string -->
<main-component [objectId]="'123456'"></main-component>

输入绑定不适用于自定义 angular 库

Input binding not working on custom made angular library

html

input

angular

angular7