В GridComponent создайте поле @input и затем передайте значение из родительского компонента. Примерно так:
@Input() inputValue: string;
Затем вы называете компонент вот так
<app-grid [inputValue]="valueFromCommon" ></app-grid>
Здесь значение от общего - это приходящее значение. Я использовал двухстороннее связывание здесь, но если вы не хотите, чтобы оно было изменено обратно, вы можете использовать одностороннее связывание.
Затем для обработки изменений у вас есть два варианта.
В компоненте grid вы можете создать такой метод (в основном реализовать при изменении)
ngOnChanges(changes: SimpleChanges) {
console.log("new value:",changes);
}
Здесь объекты изменений содержат значение, которое изменилось, его предыдущее значение и его новое значение. Вы можете обработать его как угодно.
- Другой метод, который я бы не рекомендовал, потому что это что-то вроде хака
Создание методов получения и установки для поля @input и обработка изменений в них
private _inputValue: string;
@Input() set inputValue(value: string) {
this._inputValue= value;
// process new value here
}
get inputValue(): string {
return this._inputValue;
}
----- Редактируйте с актуальным кодом вашей проблемы -----
В вашем примере способ загрузки данных в компонент сетки из службы делает его отсоединенным от родительского компонента. Вы загружаете все в ngOnInit () из внедренного сервиса. Вместо этого вы должны передать значения, которые вы хотите от родительского компонента.
Например, измените их на входы
export class GridComponent {
@Input() C_code: string;
@Input() G_code: string;
@Input() SG_code: string;
Тогда в ngOnInit не извлекайте их из сервиса и используйте те, которые пришли из родительского компонента
ngOnInit() {
this.CartdataService.get_Selected_Category_Of_Products(this.C_code,
this.G_code, this.SG_code).subscribe(
data => {
this.products = data;
console.log(data);
});
}
Затем для вызова компонента сетки используйте:
<app-grid [C_code]="categorycode" [G_code]="groupcode" [SG_code]="subgroupcode" ></app-grid>
Таким образом, вы передадите значения, выбранные из общего компонента, в компонент сетки. Теперь для обработки изменений этих значений (изменения распространяются на компонент автоматически, но если у вас есть внешняя логика изменения, вам нужно добавить ее). Поэтому в компоненте сетки добавьте этот метод:
ngOnChanges(changes: SimpleChanges) {
this.CartdataService.get_Selected_Category_Of_Products(this.C_code,
this.G_code, this.SG_code).subscribe(
data => {
this.products = data;
console.log(data);
});
}
Что в основном делает то же самое, что и ngOnInit - запрашивает сервис. Это то, что вы хотите делать при изменении свойства - запросить услугу