javascript - 将 "username"值从一个组件传递到 Angular 2 中的另一个组件

Question

我了解如何在 Angular 2 中将子组件嵌套在父组件中。这很容易实现。但是我不太清楚如何将一个值从一个组件传递到另一个组件。在我的用例中，我想将用户名从登录组件向下传递到聊天组件 - 这样用户名就会显示在聊天框中。这就是我需要做的。我知道 @Input() 装饰器可能在这里使用，我只是不清楚如何使用它实际传递值。

这是我的登录组件 html 中的内容:

<div class="center-box">
        <form name="form" class="form-fields" (ngSubmit)="f.form.valid && login()" #f="ngForm" novalidate>
            <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !username.valid }">
                <input type="text" form autocomplete="off" class="form-control" name="username" [(ngModel)]="model.username" #username="ngModel" required />
                <div *ngIf="f.submitted && !username.valid" class="help-block">Username is required</div>
            </div>
            <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !password.valid }">
                <input type="password" class="form-control" name="password" [(ngModel)]="model.password" #password="ngModel" required />
                <div *ngIf="f.submitted && !password.valid" class="help-block">Password is required</div>
            </div>
            <div class="form-group">
                <button class="submit-btn">Login</button>
            </div>
        </form>
        <div align="center" [ngStyle]="{'color': 'red'}"><alert></alert></div>
    </div>

我的登录组件如下所示:

import { AuthenticationService } from './../../data/authentication.service';
import { AlertService } from './../../data/alert.service';
import { Component, OnInit, Input } from '@angular/core';
import { Router } from '@angular/router';

@Component({
    selector: 'app-login',
    templateUrl: 'app/views/login/login.component.html',
    styleUrls: ['app/views/login/login.component.css']
})

export class LoginComponent implements OnInit {

    model: any = {};
    loading = false;
    username;
    password;

    constructor(
        private router: Router,
        private authenticationService: AuthenticationService,
        private alertService: AlertService) { }

    ngOnInit() {
        // reset login status
        this.authenticationService.logout();
    }

    login() {
        this.loading = true;
        this.authenticationService.login(this.model.username, this.model.password)
            .subscribe(
                data => {
                    this.router.navigate(['/']);
                    console.log('User logged in as: ' + this.model.username);
                },
                error => {
                    this.alertService.error(error);
                    this.loading = false;
                });
    }
}

我的聊天组件 html 如下所示:

<div class="centered-display" align="center">
  <h3>User: {{username}}</h3>
  <div *ngFor="let message of messages" class="message">
    {{username}}: {{message.text}}
  </div>
  <input class="form-group" [(ngModel)]="message" (keypress)="eventHandler($event)">
  <div class="spacing">
    <button class="submit-btn" md-button (click)="sendMessage()">SEND</button>
  </div>
</div>

这是聊天组件文件:

import { Router, ActivatedRoute } from '@angular/router';
import { ChatService } from './chat.service';
import { Component, OnInit, OnDestroy } from '@angular/core';
import { TabPage } from '../../ui/tab-navigation/tab-page';

@Component({
  templateUrl: './chat.component.html',
  styleUrls: ['./chat.component.less']
})
export class ChatComponent extends TabPage implements OnInit, OnDestroy {

  username = '';
  messages = [];
  users = [];
  routes;
  connection;
  userbase;
  route;
  message;
  user;

  constructor(private chatService:ChatService, router: Router, route: ActivatedRoute) {

        super(router, route);

        this._title = 'Chat Room';

        this.addEventListener('paramsChange', function(params) {

            this._title = 'Chat Room';

        }.bind(this));
   }

  sendMessage() {
    this.chatService.sendMessage(this.message);
    this.message = '';
  }

  sendUser() {
    this.chatService.sendUser(this.user);
    this.user = '';
  }

    trackUser() {
    this.chatService.trackUser(this.route);
    console.log('A user just navigated to ' + this.route);
  }

  // For when user clicks "enter/return" to send message
  eventHandler(event: KeyboardEvent): void {
    if (event.key === 'Enter') {
        this.chatService.sendMessage(this.message);
        this.message = '';
    }
  }

  ngOnInit() {
    this.connection = this.chatService.getMessages().subscribe(message => {
      this.messages.push(message);
    });
    this.userbase = this.chatService.getUsers().subscribe(user => {
      this.users.push(user);
    });
    this.routes = this.chatService.getRoutes().subscribe(route => {
      this.routes.push(route);
    });
  }

  ngOnDestroy() {
    this.connection.unsubscribe();
    this.userbase.unsubscribe();
  }

}

所以基本上归结为我如何在聊天组件 View 中的 h3 位置传递值:

User: {{username}}

。如何从登录组件绑定(bind)用户名值，并将其传递到聊天组件中？

Answer 1

共享服务可能是最好的:创建一个新服务:

@Injectable()
export class YourSharedService {
    sharedUser: {
        // your properties here... e.g
        username: 'string'
    };
}

然后将它注入(inject)父子的构造函数中，并在组件中访问它:

constructor(private yourSharedService: YourSharedService......) {  }

在您的登录组件中，您可以将用户分配给您新创建的服务，这样您就可以在注入(inject)共享服务的所有组件中访问它:

分配:this.yourSharedService.sharedUser = yourUserObject

然后您可以在您的组件中访问用户:

localUserObject = this.yourSharedService.sharedUser;

一些附加信息:@Input 在您的子组件不在不同的路由后面时起作用。当您的子组件位于子路由中时，共享服务是必经之路:)

共享服务是双向的，例如，当您在一个组件中更改用户属性并将用户存储在您的共享服务中时，共享同一对象(或其他)的其他组件会自动获取当前信息，例如，当你路由到另一个实现了共享服务的组件。