0

这是我尝试过的问题的链接，请参考一次---

使用事件发射器和服务进行跨组件通信的角度异步调用

我收到了一个事件发射器不能用于跨组件通信，但在这里我已经成功使用它——请看下面的代码——

用户服务.ts

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

用户.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>

那么，为什么它对我之前在照片和照片细节组件中的示例不起作用？

4

0 回答 0