Как генераторы событий работают здесь для межкомпонентного взаимодействия, и это не сработало для моего другого примера? - PullRequest
Новая
       34

Как генераторы событий работают здесь для межкомпонентного взаимодействия, и это не сработало для моего другого примера?

0 голосов
/ 26 марта 2020

Это моя ссылка на вопрос, где я попробовал это, пожалуйста, обратитесь к этому один раз ---

Асинхронный вызов в angular с использованием генератора событий и служб для межкомпонентной связи

Там я получил ответ, что источники событий нельзя использовать для межкомпонентной связи, но здесь я успешно использовал их - пожалуйста, смотрите код ниже -

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>

так, почему это не сработало для моего предыдущего примера в фото и компонент фото-детали?

...