Привязка ввода не работает на заказной угловой библиотеке

Question

Я создал библиотеку Angular, которую я могу импортировать во внешние приложения. В моей библиотеке существует компонент с именем «MainComponent», который имеет одну переменную @Input для «objectId».

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 является строкой, и в качестве входных данных вы можете передать либо:

<!-- 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>

Answer 2

objectId равно undefined при запросе в конструкторе, но должно быть определено, если вы хотите реализовать интерфейс OnInit и посмотреть на него в ngOnInit(). Передача ввода не происходит, когда создается класс компонента, она находится где-то дальше по жизненному циклу.