Angular 5：我们如何使用 routeroutlet 将数据从嵌套组件传递到父组件？答案

【问题标题】：Angular 5: How we Pass data from nested component to parent component using routeroutlet?Angular 5：我们如何使用 routeroutlet 将数据从嵌套组件传递到父组件？
【发布时间】：2018-06-18 02:36:07
【问题描述】：

场景

我要做的是从登录组件-> 应用程序组件发送数据。

下面是我的 login.component.ts 代码：

import { Component, OnInit, EventEmitter, Output, Input } from '@angular/core';
import { AuthService } from '../../services/auth.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  isUserAuthenticated: boolean = false;
  @Output() valueChange = new EventEmitter();

  constructor(private auth: AuthService) { }

  ngOnInit() {
  }

  showMe() {
    this.isUserAuthenticated = this.isUserAuthenticated == false ? true : false;
    console.log('Log comming from login.component.ts: ' + this.isUserAuthenticated);
    this.auth.login(this.isUserAuthenticated);
    this.valueChange.emit(this.isUserAuthenticated);
  }
}

auth.service.ts 代码：

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class AuthService {
  public isUserAuthenticated: boolean = false;
  constructor() { }

  login(params: boolean): Observable<boolean> {
    this.isUserAuthenticated = params;
    console.log('Log comming from auth.service.ts: ' + this.isUserAuthenticated);
    return new Observable<boolean>(observer => observer.next(this.isUserAuthenticated));
  }

}

app.component.ts 代码：

import { Component } from '@angular/core';
import { AuthService } from './services/auth.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  isUserAuthenticated: boolean = false;
  title = 'app';

  constructor(private auth: AuthService) {;
    console.log('Log comming from app.component.ts: ' + this.auth.isUserAuthenticated);
    this.isUserAuthenticated = this.auth.isUserAuthenticated;
  }

  showMe(value) {
    console.log('Receiving data from login.component.ts: ' + value);
    this.isUserAuthenticated = value;
  }
}

app.component.html

<div class='container-fluid'>
  <div class='row'>
    <div class='col-sm-3'>
      <app-nav-menu *ngIf="isUserAuthenticated"></app-nav-menu>
    </div>
    <div class='col-sm-9 body-content'>
      <router-outlet (valueChange)="showMe($event)"></router-outlet>
    </div>
  </div>
</div>

问题

我面临的问题是我的@output 发射器函数this.valueChange.emit(this.isUserAuthenticated); 无法正常工作，并且没有点击login.component.ts 中的showMe(value) 函数。我不知道我在代码中做错了什么。请看看并帮助我。谢谢

我正在使用 Angular v5.2

【问题讨论】：

标签： angular

【解决方案1】：

TLDR：使用服务并将其注入到两个组件中。

路由器出口另一侧的组件无法通过输出进行通信，因为它们不在模板中的父子关系。您只需在模板中放置一个位置，路由器将动态实例化组件，因此输出是无用的，因为无法从模板访问它。

对于服务，它将是一个单例，这意味着两个组件在注入到它们之后都可以访问同一个实例。您可以使用它来传递数据、创建事件等。

【讨论】：

【解决方案2】：

我要做的是从登录组件 -> 应用组件发送数据。

嗯，您是根据自己的要求使任务复杂化。使用共享服务来保存用户的身份（以及isAuthenticated 等相关方法）。

然后您可以将其注入您的login 组件并保存用户身份。稍后您可以将该服务注入任何其他组件并取回该数据。这就是@Injectables 的用途

【讨论】：