Передать данные в веб-компонент Angular
Я пытаюсь писать веб-компоненты в Angular и не могу понять, как передавать данные в компонент.
<my-component someId = "1234"></my-component>
Я надеялся найти способ реализовать это и получить someId в моем угловом компоненте. Возможно ли реализовать это или я должен пытаться использовать слоты? Просто чтобы быть ясным, я спрашиваю, как сделать веб-компоненты, используя угловые, а не обычные угловые компоненты.
Ответы 3
Вы должны использовать привязка данных Angular
<my-component [id] = "1234"></my-component>
И в вашем дочернем компоненте используйте @Input декораторы
export class MyComponent {
@Input('id') id: string;
}
Вам нужно использовать переменную @Input(), объявленную в вашем общем компоненте.
export class MyComponent {
@Input() someId: string = '1234';//default value
}
//HTML
<my-component someId = "1234"></my-component>
«someId» — необязательный входной параметр, который также можно игнорировать.
Обновлено: в случае, когда вы привязываете некоторую постоянную строку или число к вводу, его не нужно указывать в квадратных скобках. Вы можете использовать тот же синтаксис, что и обычный атрибут html.
У меня была эта проблема около двух дней, и, наконец, я нашел решение.
Что вам нужно сделать, так это использовать метод нгончанжес() в вашем дочернем компоненте (веб-компонент, который вы хотите выставить). Так как это для обнаружения любых изменений ваших полей @Вход().
Здесь я оставляю фрагмент кода моего веб-компонент:
@Component({
selector: 'app-shipment-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnChanges {
@Input() domain;
@Output() response = new EventEmitter<string>();
constructor() {
}
ngOnInit(): void {
}
ngOnChanges(changes: SimpleChanges): void {
if (changes.domain) {
console.info("Domain URL: ", this.domain);
this.response.emit(this.domain);
}
}
}