Передать данные в угловой элемент компонента

Question

Учитывая, что у меня есть компонент, который я хочу экспортировать и использовать в качестве отдельного компонента angular-element.

export class CompanyFormComponent implements OnInit {

@Input() public companyId: string;
company: Company;
companyForm: FormGroup;



constructor(
    private companyService: CompanyService,
    private fb: FormBuilder,
  ) { }

ngOnInit() {

if (!this.companyId || this.companyId.length === 0) {
  console.log('Please provide an Id');
}

....

AppModule:

    export class AppModule {
  constructor(private injector: Injector) {}
  ngDoBootstrap() {
    const strategyFactory = new ElementZoneStrategyFactory(CompanyFormComponent, this.injector);
    const element = createCustomElement(CompanyFormComponent, { injector: this.injector, strategyFactory });
    customElements.define('app-company-form', element);
  } 
}

Index.html:

<app-company-form></app-company-form>

Я хочу иметь возможность вводитьлюбое значение, где бы я ни использовал этот компонент, просто:

<app-company-form companyId=11></app-company-form>

Таким образом, идентификатор компании можно заполнить из другого места, полностью вне Angular.Я не хочу жестко кодировать значение в angular.

Я пробовал несколько вещей, но, похоже, ничего не получалось.

Answer 1

когда вы используете свой компонент в качестве пользовательского / углового элемента, вы можете передать входной параметр companyId, добавив в свой пользовательский элемент следующий атрибут html.

<app-company-form company-id="11"></app-company-form>