时间戳

首页 > 解决方案 > Angular 5：我们如何使用 routeroutlet 将数据从嵌套组件传递到父组件？

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

问题描述

设想

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

下面是我的 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);不起作用，并且没有达到这个showMe(value)login.component.ts 中的这个功能。我不知道我在代码中做错了什么。请看看并帮助我。谢谢

我正在使用 Angular v5.2

标签： angular

解决方案

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

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

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

推荐阅读