Angular @ContentChild() težava

3 naročniki

Imam težavo z Angularjevim @ContentChild() in sicer da je property null če ta content ni neposredno v contentu znotraj te komponente, ampak znotraj contenta, ki ga generira Router okoli <router-outlet>. Poskusil sem tudi z @ContentChildren() in opcijo { descendants: true } pa je array tudi prazen. Primer kode:

@ContentChild(SomeComponent) content: SomeComponent;

Se to sploh da kako rešiti?

Zdi se mi, da se zadeve napačno lotevaš. Glede na to, da je vsebina v <router-outlet>, bi rekel, da imaš samo enega parenta, ki bi želel komunicirati z nekimi childi, ki se pojavljajo v vsebini.

Jaz bi uvedel nek service in registriral te komponente oziroma direktive znotraj njega. Nekaj v tem stilu:

// some.service.ts
@Injectable({
  providedIn: 'root'
})
export class SomeService {

    components: SomeComponent[] = [];

    register(component: SomeComponent) {
        this.contents.push(component);
    }

    unregister(component: SomeComponent) {
        const index = this.contents.indexOf(component);
        if (index > -1) {
            this.contents.splice(index, 1);
        }
    }

    doSomething() {
        // naredi nekaj s temi komponentami
    }

}

// parent.component.ts
@Component({
  selector: 'parent-component',
  templateUrl: './parent.component.html'
})
export class ParentComponent {

    constructor(private service: SomeService) {
        // v this.service imaš zdaj service, s katerim lahko
        // komuniciraš s childi preko doSomething() metode
    }

}

// some.component.ts
@Component({
  selector: 'some-component',
  templateUrl: './some.component.html'
})
export class SomeComponent implements OnInit, OnDestroy {

    constructor(private service: SomeService) { }

    ngOnInit() {
        this.service.register(this);
    }

    ngOnDestroy() {
        this.service.unregister(this);
    }

}