[英]Passing “username” value from one component to another component in Angular 2
我了解如何在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();
}
}
因此,基本上,这取决于我如何在聊天组件视图中的h3位置传递值:
共享服务可能是最好的:进行一项新服务:
@Injectable()
export class YourSharedService {
sharedUser: {
// your properties here... e.g
username: 'string'
};
}
然后将其注入到父级和子级的构造函数中,并在组件中进行访问:
constructor(private yourSharedService: YourSharedService......) { }
在登录组件中,您可以将用户分配给新创建的服务,以便您可以在注入共享服务的所有组件中访问该用户:
分配: this.yourSharedService.sharedUser = yourUserObject
那么您可以在组件中访问用户:
localUserObject = this.yourSharedService.sharedUser;
一些其他信息: @Input
在您的子组件不在其他路线后面时起作用。 当您的childcomponent位于子路线中时,共享服务便是可行的方法:)
共享服务有两种方式,例如,当您在一个组件中更改用户属性并将用户存储在共享服务中时,共享同一对象(或其他对象)的其他组件会自动获取当前信息,例如,当您路由到实现了共享服务的另一个组件。
您可能应该设置一个单独的用户服务,以便在登录后存储用户信息。 然后,您可以将用户服务(确保使用@Injectable()
装饰器使其实际上可注入)注入到聊天组件中(通过构造函数: constructor(public userService: UserService)
),并在模板中引用它: User: {{ userService.username }}
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.