Я использую этот компонент в нескольких местах, с Различные идентификаторы, я хочу убедиться, что текущий ввод Значение сигнала Get обновляется на службе, чтобы мой ресурс всегда приносил правильные данные.
Я знаю, что могу достичь этого Просто непосредственно присваивая сигнал службы, но, как упоминалось ранее, у меня есть несколько входов, компонент должен иметь идентификатор (идентификатор (
Код: Выделить всё
input.requiredслужба: < /h4>
Код: Выделить всё
@Injectable({
providedIn: 'root',
})
export class SomeService {
http = inject(HttpClient);
serviceIdSignal: WritableSignal = signal(0); // this.serviceIdSignal(),
loader: ({ request: id }) => {
return this.http.get(`https://jsonplaceholder.typicode.com/todos/${id}`);
},
});
resource = resource({
request: () => this.serviceIdSignal(),
loader: ({ request: id, abortSignal }) => {
return fetch(`https://jsonplaceholder.typicode.com/todos/${id}`, {
signal: abortSignal,
}).then((r) => r.json());
},
});
}
< /code>
дочерний компонент: < /h4>
@Component({
selector: 'app-child',
template: `
`,
})
export class Child {
someService = inject(SomeService);
componentIdSignal: InputSignal = input.required({
alias: 'id',
});
}
< /code>
корневой компонент: < /h4>
@Component({
selector: 'app-root',
imports: [Child, JsonPipe],
template: `
{{id()}}
@if(someService.rxResource.status() === rs.Resolved) {
{{someService.rxResource.value() | json}}
} @else {
Loading...
}
@if(someService.rxResource.status() === rs.Resolved) {
{{someService.resource.value() | json}}
} @else {
Loading...
}
`,
})
export class App {
rs = ResourceStatus;
someService = inject(SomeService);
id = signal(1);
}
Подробнее здесь: https://stackoverflow.com/questions/794 ... -component
Мобильная версия