Как передать данные в дочерний компонент из родительского компонента, когда дочерний компонент вызывается через router-outlet?

Question

Я новичок. Я не мог найти способ. Я попытался использовать тему «Поведение», которую создал в службе, которую создал. ПоведениеSubject получает свое следующее значение от родительского компонента (this.service.behaviorsub.next (значение для передачи дочернему элементу))

Затем вызывается service.behaviorsub в дочернем компоненте, где я использовал подписку для получения данные. Но я получаю неопределенное определение, когда пытаюсь console.log эти данные.

Либо может быть лучший способ передачи данных от родителя к потомку (который вызывается через router-outlet), либо может быть лучше способ использования поведенияSubject.

Заранее спасибо!

Пример кода: -> родительский html

    <div class="container" *ngIf="outlet.isActivated == false">
    <div class="row">
       <div class="col" *ngFor="let item of items">
         <app-another-component [Item]="item" (click)="should-take-to-another- 
     component-for-which-there-is-router-outlet()"></app-another-component>
    </div>
   </div>
   <div class="container">
     <router-outlet  #outlet="outlet"></router-outlet>
   </div>

app-another-component содержит определенные детали, такие как заголовок и изображение, щелкнув по которому следует открыть другой компонент только с этим конкретным заголовком и только изображением (и этот заголовок не отображается в качестве параметров запроса).

Для поведения: объект: в служебном файле:

behavior: new BehaviorSubject<type>(value);

В родительском файле:

should-take-to-another-component-for-which-there-is-router-outlet(data:type){
this.service.behavior.next(data);
}

В файле (который является внуком, но посредством маршрутизации он открывает только этот файл)

ngOnInIt(){
 this.service.behavior.subscribe((data) => {
  console.log(data)
}

Здесь зарегистрированные данные показывают неопределенные

Answer 1

В таком редком случае вы можете использовать провайдера, который находится в родительском компоненте. При использовании декоратора @Component вы можете инициализировать провайдера (который использует декоратор @Injectable), которого вы также можете внедрить в компонент, отправляемый в розетку маршрутизатора.

Затем вы можете настроить наблюдаемое, чтобы ваш родитель слушает, что может быть объектом поведения.

Очень простой пример:

@Injectable()
export class MyOutputter {

private thelistener$ = new BehaviorSubject<TheDataObjectYouWant>(null);

get listener$() {
return this.thelistener$.asObservable();
}

setTheOutputValue (value: TheDataObjectYouWant) { // or use a setter. I prefer a method, but this is more flavor imo.
this.thelistener$.next(value);
}

}

В вашем материнском компоненте (тот, который содержит выход маршрутизатора):

@Component({ // skipping template and styles and selector.
providers: [MyOutputter]
})
export class MotherComponent{

constructor(private myOutputter: MyOutputter) {
// setup listening and subscription of the getter here and do what you want it to do when receiving
}

}

В компоненте, который используется в выходных данных

@Component({}) // skipping the template and stuff
export class ChildOutputComponent {

constructor(private outputter: MyOutputter) {}

// use this.outputter.setTheOutputValue() wherever you need to send the output.

}

Это один из способов справиться с этим. Это не идеально, но работает.