How event emitters work here for cross component communication and it did not work for my other example?

Question

This is my link to a question where i tried this out, pls refer to that once---

Asynchronous call in angular using event emitter and services for cross-component communication

There i received ans that event emitters cannot be used for cross component communication, but here i have successfully used it -- pls see the code below-

user.service.ts

@Injectable({ providedIn: "root" })
export class UserService {
  //activatedEmitter = new Subject<boolean>();
  activatedEmitter = new EventEmitter<boolean>();
}

user.component.ts

onActivate() {
    //this.userService.activatedEmitter.next(true);
    this.userService.activatedEmitter.emit(true);
  }
}

user.component.html

<p>User with <strong>ID {{ id }}</strong> was loaded</p>
<button class="btn btn-primary" (click)="onActivate()">Activate</button>

app.component.ts

export class AppComponent implements OnInit, OnDestroy {
  userActivated = false;
  private activatedSub: Subscription;

  constructor(private userService: UserService) {
  }

  ngOnInit() {
    this.activatedSub = this.userService.activatedEmitter.subscribe(didActivate => {
      this.userActivated = didActivate;
    });
  }

  ngOnDestroy(): void {
    this.activatedSub.unsubscribe();
  }
}

app.component.html

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
      <a routerLink="/">Home</a> |
      <a [routerLink]="['user', 1]">
        User 1
      </a>
      |
      <a [routerLink]="['user', 2]">
        User 2
      </a>
    </div>
  </div>
  <hr/>
  <p *ngIf="userActivated">Activated!</p>
  <hr/>
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
      <router-outlet></router-outlet>
    </div>
  </div>
</div>

so, why it did not work out for my previous example in phots and photo-detail component?