Как я хранить два сигнала в синхронизации (обслуживание и компонент)Javascript

Форум по Javascript
Ответить
Anonymous
 Как я хранить два сигнала в синхронизации (обслуживание и компонент)

Сообщение Anonymous »

У меня есть этот компонент, который принимает параметр в качестве input.required (скажем, id ).
Я использую этот компонент в нескольких местах, с Различные идентификаторы, я хочу убедиться, что текущий ввод Значение сигнала Get обновляется на службе, чтобы мой ресурс всегда приносил правильные данные.
Я знаю, что могу достичь этого Просто непосредственно присваивая сигнал службы, но, как упоминалось ранее, у меня есть несколько входов, компонент должен иметь идентификатор (идентификатор (

Код: Выделить всё

input.required
), но мой ресурс лежит на уровне обслуживания (разделяется этим компонентом и детьми). Добавьте массив поставщиков, конечно, если я хочу, чтобы сервис была оценена на уровне компонентов, я бы сделал это. < /p>
служба: < /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);
}
demo

Подробнее здесь: https://stackoverflow.com/questions/794 ... -component
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Javascript»